花开陌上

却出现了“坍塌”现象。



这就是float的“破坏性”——float破坏了父标签的原本结构，使得父标签出现了坍塌现象。导致这一现象的最根本原因在于：被设置了float的元素会脱离文档流。

“脱离文档流”可以理解为子元素与父元素间的DOM结构被破坏，父子关系解除。

但是，永远都不要忘记float被设计的初衷——实现文字环绕效果。当div中有文字时，文字还是会环绕在img周围的，“坍塌”现象消失了。如下图：



那么，float为什么会被设计成具有破坏性，为什么会脱离文档流？这一点非常重要！其实原因非常简单——为了要实现文字的环绕效果！
如果float不让父元素坍塌：



坍塌并脱离文档流后：

3 包裹性

如上图，普通的div如果没有设置宽度，它会撑满整个屏幕。而如果给div增加float:left之后，它突然变得紧凑了，宽度发生了变化，把内容“Phone”包裹了——这就是包裹性。div设置了float之后，其宽度会自动调整为包裹住内容宽度，而不是撑满整个父容器。

注意，此时div虽然体现了包裹性，但是它的display样式是没有变化的，还是block。

float为什么要具有包裹性？其实答案还得从float的设计初衷来寻找，float是被设计用于实现文字环绕效果的。文字环绕图片比较好理解，但是如果想要让文字环绕一个div呢？此时div不被“包裹”起来，那么如何去实现环绕效果？

4 清除空格

上图中。第一个例子，正常的img中间是会有空格的，因为多个标签会有换行，而浏览器识别换行为空格，这也是很正常的。第二个例子中，img增加了float:left的样式，这就使得img之间没有了空格，四个img紧紧挨着。
“清空格”这一特性的根本原因是由于float会导致节点脱离文档流结构。它都不属于文档流结构了，那么它身边的什么换行、空格就都和它没关系的，它就尽量的往一边去靠拢，能靠多近就靠多近，这就是清空格的本质。

清除float（清除浮动）

float具有“破坏性”，它会导致父元素“坍塌”，这不我们所期望的。如何去避免float带来的这种影响呢（也就是我们常说的“清除浮动”） ？方法有很多种，我在这里介绍4中供大家参考，大家可根据实际情况来选择。
两种简单但不常用的方法：

1.为父元素添加overflow:hidden;

2.浮动父元素

第三种方法clear:borth，不是很常用，但是大家要知道。通过在所有浮动元素下方添加一个clear:both的元素，可以消除float的破坏性。

注意：也可以添加在父div闭合元素下边，这样即是第四种方法的实现原理。

第四种方法是大家最需要掌握的，也是Bootstrap正在用的——clearfix

上图中，我们定义一个.clearfix(只是个类名，可以随意定义)类，然后对float元素的父元素应用这一样式即可。究其原理，其实就是通过伪元素选择器，在div后面增加了一个clear:both的元素，跟第三种方法是一个道理。

清除浮动四种方法可概括为：