清除浮动的七种方法

浮动元素会脱离文档流，导致不占据页面空间，所以会对父元素带来高度塌陷。如果一个元素中包含的元素全部是浮动元素，那么该元素高度将变成0。

为解决浮动带来的负面影响，需要清除浮动。

清除浮动的方式有很多种，实现的原理主要是靠clear属性，和触发新的BFC。

清除浮动的方法归纳为以下几点：

1.直接设置父元素高度。

优势：简单

弊端：必须要知道父元素高度是多少。

2.设置父元素浮动。

优势：代码少，无语义化问题

我们知道，元素浮动后会创建一个独立的BFC区域，在这个区域中计算高度时需要算上浮动元素的高度。

弊端：对后续元素可能会有影响

3.父元素overflow的属性值设置为hidden、scroll或者auto。

弊端：如果有内容要溢出显示，也会被一同隐藏。

4.父元素的display属性设置为table或者position：fixed

优势：不影响结构与表现的分离，语义化正确，代码量少 弊端：盒模型属性已经改变，会造成其他问题

5.在父元素里，追加一个空的子元素（如div），然后设置其clear属性

1、none 默认值，不做任何清除浮动的操作 2、left 清除前面元素左浮动带来的影响 3、right 清除前面元素右浮动带来的影响 4、both 清除前面元素所有浮动带来的影响 优势：代码量少 容易掌握 简单易懂 弊端：会添加许多无意义的空标签

6.利用伪元素

给父元素的类名添加一个.clearfix工具样式

然后写如下css代码

.clearfix::after{
  content:"";
  display:block;
  clear:both;
}

after 选择器向选定的元素之后插入内容 content:""; 生成内容为空 display: block; 生成的元素以块级元素显示, clear:both; 清除前面元素浮动带来的影响 相对于空标签闭合浮动的方法 优势：不破坏文档结构，没有副作用 弊端：代码量多

7.如果想要清除浮动的同时又让同属一个bfc的相邻元素不发生margin重叠，可用如下方法

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

原理：display:table本身无法触发BFC，但是它会产生匿名框(anonymous boxes)，而匿名框中的display:table-cell可以触发BFC，简单说就是，触发块级格式化上下文的是匿名框，而不是display:table。所以通过display:table和display:table-cell创建的BFC效果是不一样的。所以用此方法触发的bfc内部相邻元素不会发生外边距折叠。

最推荐使用第6种方法