css中如何清除浮动

89 阅读1分钟

在CSS中,清除浮动(clear float)是指将浮动元素的影响清除,使得父元素可以正确地包含子元素。

常见的清除浮动的方法有以下几种:

  1. 使用空元素清除浮动

在浮动元素的父元素的末尾添加一个空元素(如div),并设置clear属性为both,使得该元素两侧都不允许浮动元素。

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
  1. 使用overflow属性清除浮动

在浮动元素的父元素上设置overflow属性为hidden或auto,使得该元素可以包含浮动元素。

.parent {
  overflow: hidden;
}
  1. 使用伪元素清除浮动

在浮动元素的父元素上使用伪元素:before或:after,并设置content属性为空字符串,再设置clear属性为both,使得该元素两侧都不允许浮动元素。

.parent::after {
  content: "";
  display: block;
  clear: both;
}

需要注意的是,清除浮动可能会对布局造成影响,应该根据具体情况选择合适的清除浮动方式。