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
- 02
- Node与GLIBC_2.27不兼容解决方案08-19
- 03
- Git清空本地文件跟踪缓存08-13