:after清浮动（大白话）

最新推荐文章于 2023-03-29 11:18:51 发布

原创最新推荐文章于 2023-03-29 11:18:51 发布 · 297 阅读

1 ·

CC 4.0 BY-SA版权

可能只有自己看的懂系列专栏收录该内容

1 篇文章

订阅专栏

本文详细解释了子元素浮动后父元素高度丢失的问题，并提供了一种解决方案——使用伪元素:after进行清浮动处理，使父元素能够正确包裹子元素。

子元素浮动之后，父元素是没有高度的（高度为0）。

<div class="div1">
    <p>div1 p1</p>
    <p>div1 p2</p>
</div>
<div>块级</div>

* {
    margin: 0;
    padding: 0;
}
div{
    background-color: pink;
}
.div1{
    background-color: blue;
}
p{
    width: 200px;
    float: left;
    background-color: lightgrey;
}

结果为：

div1高度为0，且不见背景色蓝色，是因为div1里面的两个p都浮动了。

:after清浮动是要写在父级元素上的，这里即写在div1上。

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

clear: both; ————清浮动
content: “”; ————这一行必写，仅用来作清浮动用就为空””
display: block; ————确保content的内容是独立块
height: 0; ————确保content的内容不显示
visibility: hidden; ————同上

清完浮动后效果为：