得说,在学习 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 和 absolute 了,因为它们能做的(单指布局),flex 肯定能做。
而且兼容性出乎意料地好,基本本人接触到的设备都兼容了 flex。
flex 是 display 的属性值,这才是行块布局的正统啊,它规定了该元素就是一个伸缩盒,是不是相比 float 等更语义了呢。
就如同 display 其他属性值一样,每个盒模式都有其特殊的样式效果,如 inline 会失去高度,tabel-cell 会拥有一部分表格的特性,
display: flex 伸缩容器使其子级变成了伸缩项目,拥有了直接横排布局,抢占空隙/自动宽度,自动高度,可排序,可靠齐等功能,
在此就不赘述各个属性的样式效果了,随便搜搜都能比我讲的好,比如我就爱看这篇。
再说 flex 的弊端方面:
想将 flex 布局像栅栏布局那样类化,个人认为难度很大,
比如 .flex-row {dispaly:flex} .flex-row>*{flex-grow:1} 能产生横排子级全等宽的效果,但当遇上需要一个定宽值得时候,这又得加上 fle-shrink:0;
设为Flex布局以后,子元素的 float
、clear
和 vertical-align
属性将失效,这会使得与其他布局方式/类库冲突,请提前考量。
float 是一种流传很广的布局方式,栅栏布局也非常适用于快速的结构开发,
所以我从来不去抵制使用 float,但随着我们对更多布局样式的了解和实践,总有一天,我们将选择更好的,而慢慢忘记了这个偏房...