CSS清除浮动（float）的4个方法？

1条回答我要回复

益达学妹1178天前

清除浮动是为了解决页面父元素高度塌陷的问题，有4个方法可以解决。
 
方法一：使用 overflow: hidden（在父元素操作）.clearfix {
overflow: hidden;
}
副作用是离开了这个元素所在的区域以后会被隐藏（ overflow:hidden 会将超出的部分隐藏起来），不推荐。
 
方法二：添加一个标签
在父元素里面加一个标签，标签样式.clear {
clear: both;
}
副作用就是添加了一个无用标签，不推荐。

方法三：使用伪元素来清除浮动
.clearfix {
zoom: 1; // 为了兼容IE
}
.clearfix: after {
content: "";
display: block;
clear: both;
height: 0;
line-height: 0;
visibility: hidden;
}

方法四：使用双伪元素清除浮动.clearfix {
zoom: 1; // 为了兼容IE
}
.clearfix:before,.clearfix:after {
content: "";
display: block;
clear: both;
}