使用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,解决高度塌陷问题
优点:简单、代码少
缺点:只适合高度固定的布局,如果父元素高度不确定就不适合适用
建议:不推荐使用,只建议高度固定的布局时使用
在父元素结束标签之前,添加一个空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代码
<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变成表格
建议:不推荐使用
使用上述方法之一,就能达到我们的目的,效果如下图: