css 清除浮动的几种方法总结
如果一个父级元素中包含一个子级元素，并且父级元素没有设置高，子级元素却设置了浮动，这时父级元素的高度就会塌陷，从而会使后面的页面结构发生错乱，为此下面总结了清除浮动的几种方法：
# 父级元素设置高度
<style type="text/css">
.div1{height:200px;} //父级添加高度
.left{float:left;width:100px;height:100px;}
.right{float:right;width:100px;height:100px;}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
提示
父级 div 手动定义 height，就解决了父级 div 无法自动获取到高度的问题（只适合高度固定的布局，要给出精确的高度，如果高度和父级 div 不一样时，会产生问题）
# 在浮动元素最后添加空标签
<style type="text/css">
.left{float:left;width:100px;height:100px;}
.right{float:right;width:100px;height:100px;}
.clearfloat{clear:both} /*清除浮动代码*/
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="clearfloat"></div>
</div>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
提示
添加一个空标签 （div） ，利用 css 提高的 clear:both 清除浮动，让父级元素能自动获取到高度（如果页面浮动布局多，就要增加很多空元素，影响美观）
# 父级div定义伪类
<style type="text/css">
.left{float:left;width:100px;height:100px;}
.right{float:right;width:100px;height:100px;}
/*清除浮动代码*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
</style>
<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
提示
IE8以上和非IE浏览器才支持 :after，zoom (IE转有属性)可解决 ie6 , ie7 浮动问题。
# 父级元素定义
<style type="text/css">
/* overflow:hidden 或 overflow:auto*/
.div1{overflow:hidden;} /*清除浮动代码*/
.left{float:left;width:100px;height:100px;}
.right{float:right;width:100px;height:100px;}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
提示
必须定义 width 或 zoom:1，同时不能定义 height，使用 overflow:hidden 时，浏览器会自动检查浮动区域的高度（只推荐没有使用 position 的使用）
# 所有元素一起浮动
<style type="text/css">
.div1{float:left;} /*清除浮动代码*/
.left{float:left;width:100px;height:100px;}
.right{float:right;width:100px;height:100px;}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
提示
所有元素一起浮动，就变成了一个整体（不推荐使用）
# 父级div定义
<style type="text/css">
.div1{display:table;} /*清除浮动代码*/
.left{float:left;width:100px;height:100px;}
.right{float:right;width:100px;height:100px;}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
提示
将 div 属性变成表格（不推荐使用）
# 总结
以上几种方法均可达到清除浮动的方法，但值得注意的是它们清除浮动都会有不同程度的弊端，可以根据自己的业务需求选择，一般情况下我会选择 3 或 4 方式来清除浮动。
上次更新: 2024/01/30, 00:35:17