: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; ————同上

清完浮动后效果为：

div1被p撑起来了有了高度：