浮动的清除

浮动在带来方便的同时也给我们的布局带来了困难，为了消除不好的影响，我们需要动用一些方法来清除浮动造成的影响。

1. 给父盒子设置高度 ：
   这个适用于父盒子内的元素已经全部脱离文档流，这时父盒子高度会变为0，而后面的元素也会占据脱离元素的位置，但由于脱离文档流会提高元素层级，所以后面元素会被脱离元素覆盖。解决这个问题的办法就是给父盒子设置高度。

2. 使用clear：
   适用于清除给浮动元素后面的元素加上clear：both；就可以清除浮动元素对它造成的影响，不会占据浮动元素的位置。

3. 使用::after伪元素：
   该方法可以清除浮动对父盒子的影响，该方法本质上是在父盒子的最后，添加了一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的。注意到该伪元素的display值为table，即，它是一个不可见的块级元素（有的地方使用table，因为block也是一个块级元素。

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

给父盒子加上test类即可

4. 触发bfc
   给父盒子触发bfc，则父盒子的高度不会为0，浮动元素的高度会被记录。给浮动元素后面的元素触发bfc，则后来元素不会占据浮动元素的位置，但还是会紧贴浮动元素，同时bfc的元素不会被后面的浮动元素占据位置。
   触发bfc的条件：
   float的值不为none
   overflow的值不为visible
   display的值为table-cell、tabble-caption和inline-block之一
   position的值不为static或则releative中的任何一个