CSS怎样清除浮动

浮动概述

浮动是CSS中常用的布局元素，可以使一个元素相对于文档流向左或向右偏移一定的距离，而其他的文档流元素可以浮动元素的上下方或左右方进行排列。但是使用浮动元素会导致浮动元素的父元素高度塌陷，从而影响布局。因此在使用浮动时需要注意清除浮动。

使用空元素清除浮动

<div class="clearfix">
  <div class="float-left">左侧元素</div>
  <div class="float-right">右侧元素</div>
  <div class="clear"></div>
</div>

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

通过在浮动元素后添加一个空元素，并在空元素中添加样式清除浮动，可以使浮动元素的父元素正确地包裹浮动元素。这里我们给空元素添加了clear:both，使其清除上下左右的浮动。这种清除浮动的方法被称为“触发BFC”，即创建一个新的块级格式化上下文。

使用伪元素清除浮动

<div class="clearfix">
  <div class="float-left">左侧元素</div>
  <div class="float-right">右侧元素</div>
</div>

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

另一种清除浮动的方法是在浮动元素的父元素上加上:before或:after伪元素，用display: table的方式触发BFC。这种方法与使用空元素清除浮动的效果是一样的，但可以避免额外的标签。

使用overflow属性清除浮动

<div class="clearfix">
  <div class="float-left">左侧元素</div>
  <div class="float-right">右侧元素</div>
</div>

.clearfix{
  overflow: auto;
}

另一种实现BFC的方式是在浮动元素的父元素上设置overflow属性，将其值设置为auto、hidden、scroll或visible以外的值，如hidden。这种方法不会触发滚动条，但可以清除浮动。需要注意的是，如果子元素的尺寸超过父元素，可能会被裁剪。