清除浮动是为了解决父元素因为子元素浮动而导致高度塌陷的问题。以下是几种常用的清除浮动的写法:
1. 使用空的clear-fix元素:
.clearfix::after {content: "";
display: table;
clear: both;
}
然后在包含浮动元素的父元素上添加.clearfix类。
2. 使用overflow属性:
.parent {overflow: auto;
}
这会触发BFC(块级格式化上下文),从而自动清除浮动。
3. 使用clearfix类选择器:
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1; /* 兼容IE */
}
然后在包含浮动元素的父元素上添加.clearfix类。
这些方法中,第一种和第三种方式使用伪元素来插入一个空元素,通过设置clear: both将其放置在浮动元素之后,从而清除浮动。第二种方法利用overflow属性来创建一个新的块级格式化上下文,它会包裹住浮动元素并自动清除浮动。根据具体情况,选择其中一种方式即可。