清楚浮动的方法

为什么要清除浮动？

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题

1. 如下，父盒子又border方便辨识，内部又有两个盒子，未加浮动，默认撑开父盒子
   

2. ·现在是给两个子盒子加上 folat：left ，左浮动
   
   可以明显看到父盒子的边框合在一块，height：0 ；

总结得出：
父级元素不给高度，而且子元素未加浮动时会自动撑开父级元素。
父级元素不给高度，子元素添加浮动，父元素不会被撑开，从而height为0，border变成一条线

清楚浮动的方法

1. 父元素给予高度
   很多时候为了高度的自适应性, 我们用子元素去撑起父元素的高度，但是直接为元素添加高度会失去灵活性，可以用但是并不推荐
   

2. 添加额外标签
   在最后一个浮动标签后，新加一个标签，给其设置clear：both；
   增加了不必要的标签,语义化差，可以用，但同样不推荐。
   

3. 父级添加overflow属性
   通过触发BFC方式，实现清除浮动
   内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

  .bigBox {
        width: 500px;
        border: 1px solid red;
        overflow: hidden;
      }

4.使用after伪元素清除浮动
符合闭合浮动思想，结构语义化正确 推荐使用

<style>
.clearfix:after {
        /*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }
.clearfix {
        *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
      }
</style>
<div class="bigBox clearfix">
      <div class="box1"></div>
      <div class="box2"></div>
</div>