浮动，从诞生那天起，它就是个特别的属性——既为网页布局带来新的方法，却又随之产生一系列的问题。当然，随着时间的推移，这些问题终究有了一些出色的解决方案，Kayo 要在这里详细介绍的，除了是这些解决方案，还有其中的原理。（温謦提示：文章信息量大且篇幅长，请各位自备瓜子，饮料，音乐）。

一.什么是清除浮动？
1.浮动的缺陷
在了解如何清除浮动之前，Kayo 先介绍为什么需要清除浮动。如本文开头所说的，浮动虽然可以便于页面布局，但同时会产生一些问题，也就是我们常说的“副作用”。而一个元素设置了浮动（即 float 值为 left, right 或 inherit 并从父元素上继承 left 或 right 值）的常见缺陷是——影响它的兄弟元素的位置和父元素产生高度塌陷，下面对这两个问题展开说明。

一个元素设置了浮动后，会影响它的兄弟元素，具体的影响方式较为复杂，这要视乎这些兄弟元素是块级元素还是内联元素，若是块级元素会无视这个浮动的块框，也就是我们平时看到的效果——使到自身尽可能与这个浮动元素处于同一行，导致被浮动元素覆盖，除非这些 div 设置了宽度，并且父元素的宽度不足以包含它们，这样兄弟元素才会被强制换行；若是内联元素，则会尽可能围绕浮动元素。

More »