清除浮动的四种方式

1. 标签法

即在子元素中加入一个标签，用于清除浮动

.clearfix {
     clear: both
  }

2. overflow法

给父元素设置overflow属性

 .box {
           width: 700px;
           overflow: hidden;
 }

3. 伪元素法

 .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
  }

百度就是使用的这种方法：

image.png

4. 双伪元素法

 .clearfix:after, .clearfix:before {
            content: "";
            display: table;
 }
.clearfix:after {
            clear: both;
 }

总结

清除浮动方法	优点	缺点
标签法	通俗易懂，写起来简单	添加了额外的标签，破坏了原有的结构，结构化变差了
overflow法	写起来简单	hidden会把内容截断
伪元素法	结构语义正确	有兼容问题:IE6,7不支持:after
双伪元素法	结构语义正确	有兼容问题:IE6,7不支持:after