知识共享许可协议

回归CSS标准之Float

最近因为遇到一个float相关的bug,又跑去撸了一遍css标准。然后发现,它确实比其他属性复杂好多,既不像inline-block那样单纯的完成并排显示,又不像绝对定位那样彻底的脱离文档流而不影响别的元素。它唯一单纯的就是,真的是唯一可以实现文字环绕显示的属性。

但是唯一单纯的特点却并不是很招人待见,相反,大家更习惯使用float去完成其他的功能,比如横排展示和自适应分栏布局。

很多人这样用着,只是因为一堆现成的文章告诉他们可以这样用,但是到底为什么可以,以及用的时候要注意什么问题却并不是所有人都知道,结果就是,一时的“便利”,为日后的维护埋了一堆的坑。

这篇文章打算通过将目前一些成文的浮动元素的特点与CSS规范中的具体描述对应,来加深大家对float属性原理的理解。并在后面通过一个bug实例,说明使用这个属性时要注意的问题。

浮动元素的业界公认特点

float属性被设置为非none的元素:

  1. 元素被视作块级元素,相当于display设置为“block”;
  2. 元素具备包裹性,会根据它所包含的元素实现宽度、高度自适应;
  3. 浮动元素前后的块级兄弟元素忽视浮动元素的而占据它的位置,并且元素会处在浮动元素的下层(并且无法通过z-index属性改变他们的层叠位置),但它的内部文字和其他行内元素都会环绕浮动元素;
  4. 浮动元素前后的行内元素环绕浮动元素排列;
  5. 浮动元素之前的元素如果也是浮动元素,且方向相同,它会紧跟在它们后面;父元素宽度不够,换行展示;
  6. 浮动元素之间的水平间距不会重叠;
  7. 当包含元素中只有浮动元素时,包含元素将会高度塌陷;
  8. 浮动元素的父元素的非浮动兄弟元素,忽视浮动元素存在,覆盖浮动元素;
  9. 浮动元素的父元素的浮动兄弟元素,会跟随浮动元素布局,仿佛处在同一父元素中。

目前实现的很多应用都是直接对应上述特点实现的。但是很多人在看过这些描述以后,并不知道它的结论从何而来,无据可循,怎会安心?为了解决大家的疑虑,下面我会将上面的九条与CSS规范做一一的对应。

阅读全部