题主小白，在下面的例子本想让p2在下面一行显示，但clearfix并没有清除浮动。求大神指出哪里出错，跪谢。

html：

<p class="p0">
    <p class="p1 clearfix">p1</p>
    <p class="p2">p2</p>
</p>

css:

.p0{
    width: 300px;
    height: 300px;
    background-color: seagreen;
}
.p1{
    float: left;
    width: 100px;
    height: 100px;
    background-color: white;
}
.p2{
    float: left;
    width: 100px;
    height: 100px;
    background-color: salmon;
}
.clearfix:after,.clearfix:before{
    content: '';
    display: block;
    clear: both;
}

结果：