刚刚了解到float和flex两种布局方式，学习的进度还是比较慢的，年纪大了加上日常的工作，理解起来还是比较吃力。为什么今天单单聊起了float和flex这两种布局方式呢，因为我觉得这两种布局方式很像，放到一起聊一聊，主要还是为了加深我的记忆。

       float最初的设计目的是为了文字排版，后来被更多的应用与网页的布局，因为大多数的浏览器都支持float属性，兼容性自然是没得说。不过话又说回来，float也不是十全十美，浮动就像空中的风筝，随心所欲的不易掌控，父级在它的眼里不存在一样，每次控制都需要clearfix来解决。

       flex就不一样了，使用display: flex属性来启用弹性布局，而且更容易控制，有些时候针对于列表式排列，完全不需要专门的计算间距和边距，只要宽度不超过父级宽度，就能完美的排列起来，起码我目前学到的和接触到的是这样，flex更贴合新手的逻辑思维方式。缺点就是有些老一点的浏览器不适应，不过随着技术的发展，老的浏览器也很快就淘汰了，无所吊畏。

下面来对比一下两种布局方式的不同：

布局难度不同

       float布局：实现响应式布局比较困难，需要用媒体查询和其他技术来调整布局，维护起来较为复杂。

       flex布局：内建了对响应式设计的支持，能够根据容器的大小自动调整元素的大小和排列，非常适合响应式网页设计。

高度自适应

       float布局：子元素的高度不一定会影响父元素的高度，通常需要手动处理父容器的高度问题。

       flex布局：子元素的高度和宽度会自动适应父容器的布局，能够更好地处理动态内容和自适应设计。

响应式设计

       float布局：父容器的高度不会自动适应子元素的高度，通常需要额外的CSS或JavaScript处理来解决这个问题。

       flex布局：子元素的高度和宽度能够自动适应父容器的布局，处理动态内容和自适应设计更加方便。

       至于兼容性这个就不用多说了，慢慢的这个区别会变得越来越小。flex布局在现代网页设计中通常被认为比float布局更强大、更灵活，更适合处理各种复杂的布局需求，更适合新手初学者学习。