CSS清除浮动的2种方法

CSS 清除浮动的两种方法

1. 使用 overflow 清除浮动（不推荐）

先找到浮动盒子的父元素，给父元素添加一个属性 overflow: hidden，就会清除子元素对页面的影响。注意这会裁剪超出内容，且创建 BFC，可能带来其他副作用。

2. 使用伪元素清除浮动（最常用）

伪元素：在页面上不存在的元素，但可以通过 CSS 添加上去。

种类：

• :after（在元素之后）；
• :before（在元素之前）。

注意：每个元素都有自己的伪元素。

.clearfix:after {
    content: "";
    height: 0;
    line-height: 0;
    display: block;
    clear: both;
    visibility: hidden;  /* 将元素隐藏起来 */
    /* 在页面的 clearfix 元素后面添加了一个空的块级元素
       这个元素的高为 0 行高也为 0，并且这个元素清除了浮动 */
}
.clearfix {
    zoom: 1;  /* 为了兼容 IE6 */
}

补充：现代方案可以用 display: flow-root 替代伪元素清除浮动：

.parent { display: flow-root; }

它直接让父元素形成 BFC，无需关心子元素浮动，更符合语义。