CSS之清除浮动

使用CSS中的float使元素浮动起来之后，会导致父元素高度塌陷。

下面是一个简单的例子：

<div style="background-color: aliceblue;">
<div style="width: 100px;height: 100px;float: left;background-color: pink;"></div>
<div style="width: 100px;height: 100px;float: right;background-color: lightblue;"></div>
</div>

我们期待的效果是



结果我们看到的效果却是



可以看到，我们对父元素设置的背景颜色并没有起到作用。

当我们使用调试工具查看页面元素时，发现此时父元素的高度为0，即之前说到的父元素高度塌陷。



此时我们就需要清除浮动了，清楚浮动通常有下面几种方法：

1、对父元素设置合适的高度（height）

<div style="background-color: aliceblue;height: 100px;">
<div style="width: 100px;height: 100px;float: left;background-color: pink;"></div>
<div style="width: 100px;height: 100px;float: right;background-color: lightblue;"></div>
</div>

原理：手动设置父元素高度height，解决高度塌陷问题

优点：简单、代码少

缺点：只适合高度固定的布局，如果父元素高度不确定就不适合适用

建议：不推荐使用，只建议高度固定的布局时使用

2、clear:both清除浮动
在父元素结束标签之前，添加一个空div标签，设置其style="clear:both"

<div style="background-color: aliceblue;">
<div style="width: 100px;height: 100px;float: left;background-color: pink;"></div>
<div style="width: 100px;height: 100px;float: right;background-color: lightblue;"></div>
<div style="clear:both;"></div>
</div>

原理：添加一个空div，利用clear:both清楚浮动，使父元素自动获得高度

优点：简单、代码少、浏览器兼容性好

缺点：新增空div标签，违背代码语义化

建议：不推荐使用

3、父元素定义伪类:after和zoom

<style>
.clearFloat:after {
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}
.clearFloat {
zoom: 1;
}
</style>

<div class="clearFloat" style="background-color: aliceblue;">
<div style="width: 100px;height: 100px;float: left;background-color: pink;"></div>
<div style="width: 100px;height: 100px;float: right;background-color: lightblue;"></div>
</div>

原理：IE8以上及非IE浏览器才支持:after，zoom（IE专有属性）用于解决IE6和IE7浮动问题

优点：浏览器兼容性好

缺点：代码多

建议：推荐使用，建议定义公共类，减少css代码

4、设置父元素overflow:hidden或auto

<div style="background-color: aliceblue;overflow: hidden;">
<div style="width: 100px;height: 100px;float: left;background-color: pink;"></div>
<div style="width: 100px;height: 100px;float: right;background-color: lightblue;"></div>
</div>

原理：使用overflow:hidden，浏览器会自动检测浮动区域的高度

优点：简单、代码少、浏览器兼容性好

缺点：设置overflow:auto之后，可能会产生滚动条

5、父元素也设置浮动

<div style="background-color: aliceblue;float: left;width: 100%;">
<div style="width: 100px;height: 100px;float: left;background-color: pink;"></div>
<div style="width: 100px;height: 100px;float: right;background-color: lightblue;"></div>
</div>

建议：不推荐使用

6、设置父元素为display:table

<div style="background-color: aliceblue;display: table;width: 100%;">
<div style="width: 100px;height: 100px;float: left;background-color: pink;"></div>
<div style="width: 100px;height: 100px;float: right;background-color: lightblue;"></div>
</div>

原理：将div变成表格

建议：不推荐使用

使用上述方法之一，就能达到我们的目的，效果如下图：