css float 浮动是个混球

得说，在学习 CSS 的时候就一直在疑惑，横排布局干嘛要用 float 这种属性，

用了还会高度塌陷，怎么不发明些高级点的属性来完成横排布局呢，

甚至所有人都告诉我摒弃表格布局，浮动布局才是 DIV+CSS 时代的产物。

 

以前我是没得选，现在想想，都过去这么多年了，也许我应该回去看看。

 

其实当时制定 CSS 的人也许根本就没想过会用 float 来布局，最多来个 word 的那种文本环绕就不错了，

或者说布局本来不是 float 的本职工作，你听过建房子有可能用左右浮动这种办法的吗...

即便如今有多种方法去解决高度塌陷，

比如 overflow: hidden 对布局造成的影响，等你遇到了你就会发觉这家伙神烦了，本来想露出的部分结果露不出来了，呵呵呵呵。

另一方面，个人认为随着时代变化，网页的交互需求会翻倍增加，不只停留在搭建和布局上，还将有更多动效/微数据上的突破，

所以 :before 和 :after 将会有更多应用，拿来清除浮动实在是大材小用了。

 

而相对而言，inline-block 仿佛更像是为横排布局而设计的。inline 是行，block 是块，一行里的方块。

可惜的是，它的兼容性实在不忍吐槽，

要么底部有缝隙，需要 vertical-align，

要么左右有缝隙，而 font-size:0 并不适用 chrome，letter-spacing: -2px 的数值其实并不稳定，有时候还会需要 -4px。

 

从冠冕堂皇回到对 float 的吐槽...

浮动布局就像是先伤己后伤人，一挥刀自宫把自己脱离文档流，再一反手影响别人，而且出招别扭。

浮动时我们多半要使用定宽，拿定宽去进行响应式设计时，栅栏布局已经很不灵活了（即便是百分比），稍微改大号字体可能整个布局就崩了。

曾经试着写类库的时候就希望将 logo+搜索框+菜单按钮 这样的三栏布局的样式类化，呵呵，最终我放弃了 float 动用了 absolute 来实现垂直居中，发现甚至还不如 table-cell 方便。

这也许就是为什么 twitter 等公司互联网老大哥还在使用表格布局的部分原因吧。

另一方面，float 与 absolute 同是脱离文档流，但 flost 还是能影响其他元素，所以说 float 脱离得并不彻底，因此在重绘和回流时 float 将比 absolute 更烧。

其次由于浮动的效果，很多效果也就难以同时产生了，比如垂直居中/子级等高/元素排序等等...

 

不知是不是幸运降临，float 难得的很容易理解，兼容又不错，有类库后使用也比较方便，实在是这个急功近利的时代容易接受的。

但不管怎样，布局终究不是它的本质工作，甚至让它成为了这个时代的主流，回头想想还是有些可怕的。

或许你没有体会过 表格布局/定位布局/浮动布局/栅栏布局 的优劣不同，不知道他们在开发和维护上所消耗的成本精力的差别；

有些人也知道浮动这个属性能不用就不用，但是由于找不到更好的替代方法，回头想想又是可悲的。

 

想来 CSS3 的开发者也发现了这个问题，而推出了 flexbox 这种布局方式，很大程度上完善了布局功能。

它分三个阶段: box（最老，如今兼容不怎么好）/ flexbox（过渡，流传不广）/ flex（最新），及其 inline 形态（即 inline-box/inline-flex 等）。

（以前是资料看得不多，一直不敢写，但最近装逼过头了发了大话被老大抓住话头了，只好赶鸭子上架了，还请爸爸们轻喷。）

flex 布局的中文名称十分的美妙：自动布局/弹性布局/伸缩容器，光看这名字就已经觉得超屌了。

它确实拥有以往布局难以企及的灵活性，在它的领域里基本就可以完全抛弃 float 和 table 了，因为它们能做的（单指布局），flex 肯定能做。

而且兼容性出乎意料地好，基本本人接触到的设备都兼容了 flex。

flex 是 display 的属性值，这才是行块布局的正统啊，它规定了该元素就是一个伸缩盒，是不是相比 float 等更语义了呢。

就如同 display 其他属性值一样，每个盒模式都有其特殊的样式效果，如 inline 会失去高度，tabel-cell 会拥有一部分表格的特性，

display: flex 伸缩容器使其子级变成了伸缩项目，拥有了直接横排布局，抢占空隙/自动宽度，自动高度，可排序，可靠齐等功能，

在此就不赘述各个属性的样式效果了，随便搜搜都能比我讲的好，比如我就爱看这篇。

 

再说 flex 的弊端方面：

想将 flex 布局像栅栏布局那样类化，个人认为难度很大，

比如 .flex-row {dispaly:flex} .flex-row>*{flex-grow:1} 能产生横排子级全等宽的效果，但当遇上需要一个定宽值得时候，这又得加上 flex-shrink:0;

设为Flex布局以后，子元素的 float / clear 和 vertical-align 属性将失效，这会使得与其他布局方式/类库冲突，请提前考量。

其次 CSS3 新属性对旧属性的影响也偶尔发生，鄙人正在收罗中...

 

 float 是一种流传很广的布局方式，栅栏布局也非常适用于快速的结构开发，

所以我从来不去抵制使用 float，但随着我们对更多布局样式的了解和实践，总有一天，我们将选择更好的，而慢慢忘记了这个偏房...