210201.md

清除浮动

面试题;

为什么要清除浮动

当一个元素内部子元素使用了浮动属性(float)时,且父元素未设置高度,子元素不能撑起父元素的高度.这说明父元素内的子元素会影响父元素的兄弟元素,所以为了避免该副作用,所以需要清理浮动

如何清除

1. 不使用浮动属性

现在 css3 有了更好的 flex 布局,或者 grid 布局可以替代 float

2. 给父元素创建 BFC

BFC 就像面向对象中的封装,可以创建独立的渲染区域,它按照布局的一定规则来将内部元素如何布局,并且与这个区域外部毫不相干。

1. 设置 display 为 flex;
2. 设置 overflow 为 hidden

3. 使用after伪元素清除浮动

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