首页 > 代码库 > 清除浮动的几种方式
清除浮动的几种方式
最近来了个小徒弟,总是被浮动的盒子整蒙圈了,作为小师父的我就给他梳理一下:
浮动就是页面布局中是某些盒子添加了float:left 或float:right的类名或属性。其具有以下特点:
- 浮动的元素会脱离标准流;
- 浮动后的元素会覆盖标准流的元素;
- 浮动规则:浮动找浮动,不浮动找不浮动;
- 浮动显示的位置与原本不浮动的位置是对应的;
- 浮动的元素会影响下面的元素;
- 浮动的元素会改变显示方式(行内块级元素):
a) 不管元素是行内元素还是块级元素都会在同一行显示;
b) 浮动后的元素可以设置宽高;
例:一个父盒子中有一个子盒子,父盒子没有设置宽高,若子盒子在父盒子中浮动,那么下面的元素会自动补位,所以需要清除浮动(clear:both)。
清除浮动:
- 额外标签法:在浮动的盒子下面再放一个标签,在这个标签中使用clear:both类名或属性来清除浮动对页面的影响:
a) 内部标签:会将这个父盒子的高度重新撑开。
b) 外部标签:会将浮动效果清楚,但不会撑开父盒子。
注意:一般不使用此方法,会增加页面标签。
2. 使用overflow属性:先找到浮动盒子的父元素,再在父元素中添加overflow:hidden属性。
注意:一般不使用此方法,因为溢出这个元素所在的区域会被隐藏。
3.使用伪元素:
.clearfix:after {
content: ‘‘;
height: 0;
line-height: 0; /*或 overflow:hidden*/
display: block;
visibility: hidden;
clear: both;
}
.clearfix {
zoom: 1; /*兼容ie6*/
}
4. 双伪元素标签:页面上不存在的元素可以通过css添加上去,每个元素都有自己的伪元素。
.clearfix:before,
.clearfix:after {
content: ‘‘;
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
这是我总结的几种清除浮动的方式,希望对大家有帮助。
清除浮动的几种方式