清除浮动

清除浮动可以理解为清除浮动产生的影响。当元素浮动时也就是为当前元素创建了块格式化上下文（BFC），会对周围的元素或者父元素在布局上会产生一定的影响。

比如：父元素因无法自动计算高度而产生的高度塌陷；因脱离文档流而使兄弟元素错位等。

要清除浮动产生的影响，其实就是在解决这两方面的问题。方法是可以通过设置父元素高度，或利用BFC，或者使用自带属性 clear进行清除。

1. 设置父元素的高度

设置父元素的高度解决的是元素浮动产生的父元素高度塌陷问题，其内部元素浮动影响并未彻底清除，且需要进行计算然后再设置，比较固定，一旦子元素的高度发生改变，父元素的高度也需要再次计算设置，不够灵活。除非内容高度固定一成不变，否则不推荐使用。

2. 利用BFC

根据BFC的规则计算BFC的高度时，浮动元素也参与计算, 父级元素设置为overflow : hidden
该方法是需要把属性添加到父元素当中，以解决内部元素浮动影响。不能用于解决兄弟元素的浮动问题。

3. 自带属性 clear

使用自带的属性可以非常好的解决浮动影响。该方法直观有效，哪里需要清除就在哪里添加一个兄弟元素，设置 clear 属性即可，一般属性值都设置为 both 清除两侧的浮动，也可以根据实际需要清除左侧或右侧，灵活方便直观。在 bootstrap 4.0 框架中的 clearfix 应用了该方法，其是在父元素中设置了伪元素，并设置了伪元素隐藏。

伪类元素（::after,::before）

1
2
3
4
5

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

推荐使用添加伪元素的方法