清除浮动的四种方法

为什么清除浮动：为了不影响页面元素的布局。浮动的元素会脱标，脱标后，在标准流中的元素就会被浮动的元素给盖住，就会对页面布局造成影响。所以需要清除浮动造成的影响。

清除浮动的方法：

（1）伪元素清除法（常用）

单伪元素清除法

原理：通过给父元素添加 .clearfix的类名 ，该类名由于设置了一个块级伪元素（伪元素默认为行内），然后用clear：both清除掉伪元素左右的浮动造成的影响

关于clear：both的详细用法参考：CSS之clear:both深度理解 - SegmentFault 思否

.clearfix::after{
      content: '';
      /* 因为伪元素默认是行内样式，所以要转为块元素 */
      display: block; 
      /*清除左右两边的浮动*/
      clear: both;
      height: 0;
     /*隐藏content中的内容(避免不小心在content中填入了内容)*/
      visibility: hidden;
    }

双伪元素清除法

原理：比单伪元素清除法，不仅能够清除父元素的后面浮动造成的影响，也能清除前面浮动造成的影响

.clearfix::before,
    .clearfix::after{
      content: '';
      /*以表格样式展示*/
      display: table;
    }
    .clearfix::after{
      clear: both;
    } 

（2）块级格式化上下文。通过overflow：hidden触发BFC

原理：overflow：hidden是清除子元素对页面的影响，它会触发BFC，而BFC有个特性就是浮动的子元素的宽高会被算进父元素的总宽高里面，因此当父元素拥有了高度，自然就会清除浮动对后续元素造成的影响了

操作：给父元素设置overflow：hidden

（3）额外标签法。

介绍：给父元素中最后一个子元素的后面添加一个块级元素，给这个块级元素设置clear：both

原理：clear:both意味着这个盒子的顶边框将会低于在它之前的任何浮动盒子的底外边距。

（4）直接设置高度。

介绍：需要手动计算子元素的高度，然后设置相应的高度给父元素

原理：给浮动元素的父元素设置高度，让这个高度能够包住浮动的子元素，而父元素本身就是标准流，所以不会对后续的页面布局造成影响

如果你有更好的方法或者是建议，欢迎评论区留言