清除浮动

浮动元素会排列在父级的边界处或者前一个浮动元素以后

一、不清除浮动产生的问题

（1）因为浮动元素已经脱离正常文档流，当父级元素的高度小于浮动元素的高度时，出现“高度塌陷”问题。

<div id="div1">
      <div class="child1">child1</div>
 </div>
 <div id="div2"></div>
 
 #div1 {
      border: 1px solid black;
    }
    .child1 {
      width: 100px;
      height: 100px;
      background: red;
      float: left;
    }
    #div2 {
      margin-top: 20px;
      width: 100%;
      height: 20px;
      border: 1px solid green;
    }
复制代码

此时div1元素的高度为0，是由于child1元素浮动，脱离正常文档流，使得父级div1元素未被撑开，同时影响div2元素排版。以下所示：

（2）文字围绕浮动元素排版（浮动元素不用会影响块级元素排列，只会影响内联元素）

• 内联元素

<div class="child1">child1</div>
<span>哈哈哈哈哈哈哈哈哈哈....</span>
复制代码

此时若是给div1元素添加浮动，div2和div3的排列方式不会被改变。

• 块级元素

<div class="div1">div1</div>
  <div class="div2">div2哈哈哈哈哈哈</div>
  <div class="div3">div3</div>
复制代码

此时给div1元素添加浮动，并不会影响div2和div3元素的排列方式，可是会影响里面文本的排列方式，文字会排列在前一个浮动元素以后。

二、清除浮动方式

<div id="wrap" class="clearfix">
  <div class="div1">div1</div>
  <div class="div2">div2哈哈哈哈哈哈</div>
  <div class="div3">div3</div>
  <div class="clear"></div>
</div>
复制代码

（1）利用父级伪元素::after清除（尽可能定义公共类，提升复用）

.clearfix::after{
    content:'';
    display:block;
    clear:both;
}
.clearfix{
    兼容ie6,ie7解决浮动
    zoom:1;  
}
复制代码

原理：在父级元素的最后面，添加一个空标签，使用clear:both属性，表示空标签的左右都不能有浮动元素，可是浮动元素的位置已经肯定，因此空标签就只能渲染在浮动元素下方，而父元素必须考虑非浮动子元素的位置，因此父容器的高度被撑开。

（2）在浮动元素结尾处添加块级空标签(必须是块级元素)

.clear{;
    clear:both
}
复制代码

原理同利用伪元素清除同样。

（3）给父元素定义height

（4）让父元素产生BFC

原理：计算BFC的高度时，浮动子元素也参与计算

overflow:hidden/auto/scroll;
float:right/left;
display:inline-block/table-cell/table-caption/flex/inline-flex;
position:absolute/fixed
复制代码

以上任何一个属性均可以触发BFC，清除浮动。