在CSS中,清除浮动(clear float)是指将浮动元素的影响清除,使得父元素可以正确地包含子元素。
常见的清除浮动的方法有以下几种:
- 使用空元素清除浮动
在浮动元素的父元素的末尾添加一个空元素(如div),并设置clear属性为both,使得该元素两侧都不允许浮动元素。
.clearfix::after {
content: "";
display: block;
clear: both;
}
- 使用overflow属性清除浮动
在浮动元素的父元素上设置overflow属性为hidden或auto,使得该元素可以包含浮动元素。
.parent {
overflow: hidden;
}
- 使用伪元素清除浮动
在浮动元素的父元素上使用伪元素:before或:after,并设置content属性为空字符串,再设置clear属性为both,使得该元素两侧都不允许浮动元素。
.parent::after {
content: "";
display: block;
clear: both;
}
需要注意的是,清除浮动可能会对布局造成影响,应该根据具体情况选择合适的清除浮动方式。