css中如何清除浮动

在CSS中，可以使用clear:both属性来清除浮动。以下是几种常见的清除浮动的方法：

1. 使用clearfix类：在CSS中定义一个clearfix类，并将其应用于需要清除浮动的父元素上。

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
.clearfix {
  zoom: 1;
}

 

<div class="clearfix">
  <div class="floated-element"></div>
  <div class="floated-element"></div>
</div>

 

1. 使用overflow:hidden：将需要清除浮动的父元素的overflow属性设置为hidden。

.parent-element {
  overflow: hidden;
}

 

<div class="parent-element">
  <div class="floated-element"></div>
  <div class="floated-element"></div>
</div>

 

1. 使用overflow:auto：将需要清除浮动的父元素的overflow属性设置为auto。

.parent-element {
  overflow: auto;
}

 

<div class="parent-element">
  <div class="floated-element"></div>
  <div class="floated-element"></div>
</div>

 

这些方法可以根据实际情况选择其中一种来清除浮动。