四种清除浮动的方法

为什么要清除浮动？

        清除浮动的本质:主要为了解决父级元素因为子级浮动引起内部高度为0的问题。也称为高度塌陷。

清除浮动的方式

清除浮动总体上可以分为两个大类：

1. 通过clear：both样式实现清除浮动
   1. 手动添加一个标签并指定样式为clear：both；缺点：多出无意义的标签

       <div class="father">
          <div class="child1">
              我是1号子盒子
          </div>
          <div class="child2">
              我是2号子盒子
          </div>
          <div class="clear">
              我是用来清除浮动的，因为有文本所以会撑大父盒子，如果没有内容就不会对父盒子产生影响了。
          </div>
      </div>

   2. 使用伪类选择器：after动态添加一个元素（推荐）

          .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
              content: "";
              display: block;
              height: 0;
              clear:both;
              visibility: hidden;

   3. 使用双伪类选择器：before和：after

           .clearfix:after,.clearfix:before{
              content: "";
              display: table;
          }
          .clearfix:after{
              clear: both;
          }
          .clearfix{
              *zoom: 1;
          }
       
       <div class="fahter clearfix">
              <div class="big">big</div>
              <div class="small">small</div>
          </div>
          <div class="footer"></div>

2. 通过设置父盒子为BFC
   1. 通过bfc的特性可知，bfc的高度计算式包括浮动元素的，因此可以通过以下方式触发父盒子的BFC：
      1. overflow：hidden
      2. position：absolute
      3. float
      4. display：flex