一、为什么要清除浮动
由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为 0 时,就会影响下面的标准流盒子。
清除浮动的本质是清除浮动元素造成的影响
****如果父盒子本身有高度,则不需要清除浮动
****清除浮动之后,父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了
二、清除浮动的四种方法
1、父盒子添加overflow:hidden、auto或scroll
2、额外标签法:在浮动元素末尾添加一个空标签(必须是块级元素),例如 <div style=”clear:both”></div>,然后设置.clear样式为clear: both(清除两侧浮动);或者clear: left(清除左侧浮动);或者clear: both:right(清除右侧浮动);一般使用clear: both。
3、:after伪元素法:是额外标签法的升级版,给父元素添加class="clearfix",然后设置属性
.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7专用 */
*zoom: 1;
}
4、双伪元素清除浮动:也是给父元素添加class="clearfix",然后设置属性
.clearfix:before,
.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}