css中怎样清楚浮动 有几种

CSS中怎样清除浮动
浮动是CSS中非常重要的概念之一。在实现网页布局时，浮动可以让元素脱离文档流，以便使其他元素可以占用它们的位置。但有时候，在使用浮动布局时，元素可能会出现一些预料之外的情况，例如，高度塌陷或左右浮动等问题。这时候，我们就需要清除浮动。
1.使用clear属性
我们可以在需要清除浮动的元素后面添加一个空的div，然后为这个div添加样式clear: both;。这样可以让浮动的元素不再影响后面的元素。

 <div class="clearfix">
    <div class="float-left"></div>
    <div class="float-right"></div>
    <div class="clear"></div>
  </div>

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

2.使用overflow属性
将父元素的overflow属性设置为hidden或auto，可以清除子元素的浮动，因为元素的框会被包括在内，不会超出父元素。

 <div class="parent">
    <div class="float"></div>
    <div class="float"></div>
  </div>

  .parent {
    overflow: hidden;
  } 

3.使用伪元素:before和:after
我们可以在需要清除浮动的元素上使用伪元素:before和:after，为它们添加样式clear: both;，清除浮动。

 <div class="clearfix">
    <div class="float-left"></div>
    <div class="float-right"></div>
  </div>

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

以上就是CSS中清除浮动的三种方法。每种方法都有其优缺点，请根据实际情况选择合适的方法。