清除浮动的五个方法

1. 给父元素加高度（不好，因为一般会变）

2. 额外加标签：

   • 操作：在父元素内容的最后添加一个块级元素,常叫clearfix；类
   • 给添加的块级元素设置clear:both；清除左右两侧的浮动的影响。

3. （常用）单伪元素清除法：(和上面的额外标签法原理一样)

   • 操作：用伪元素代替了额外标签

   给元素再赋予一个类.clearfix

   基本写法
   .clearfix::after{
       content:"";
       display:block;     必须是块级元素！！！
       clear:both;
   }
   补充写法
   .clearfix::after{
       content:"";
       display:block;
       clear:both;
       height:0;
       visibility: hidden;
   }
   

4. 双伪元素清除法

   解决了外边距塌陷问题
   .clearfix::before,
   .clearfix::after{
       content:"";
       display:table;
   }
   /真正清除浮动的标签/
   .clearfix::after{
       clear:both;
   }
   

5. 给父元素设置overflow:hidden（最简单）