SOURCE

<style>
.p1 {
width:250px;
height:200px;
background:green;
/* display:inline-block; */
}

.p2 {
    width:200px;
    height:200px;
    float:left;
    background:pink;
}

</style>


<p>
    浮动，你可以理解为漂浮在空中，然后它后面紧挨着但未设置浮动的元素则仍然在地上，并且填补了漂浮元素原来在地上所占用的位置。
    也就是说，非浮动元素“钻”到浮动元素的下面去了，所以被盖住了。
</p>


<div class="p1 p2"> </div>


<div  class="p1"></div>