关于css 清除浮动和闭合浮动

1、清除浮动
：清除浮动就是清除上一元素，浮动对自己和下面元素的影响；

 

2、闭合浮动
：与(清除浮动)比闭合浮动，仍然对其后面的元素造成影响，其闭合效果就是指本事的物理位置还是真实存在；会对后面元素造成阻碍影响！

 

 

相关html代码如下：

<div class="box1">
    <div class="fl"></div>
    <p class="p1">器，因为是偶然发现器，因为是偶然发现</p>
    <p class="p2">器，因为是偶然发现器，因为是偶然发现</p>
</div>

相关CSS代码如下：

.box1{
    width: 100%;
    margin: 50px auto;
    background: blue;
    overflow: hidden;
}
.box1 .fl{
    float: left;
    width: 200px;
    height: 200px;
    margin: 5px;
    background: pink;
}


.box1 p.p1{
    background: yellow;
    display: table; /*闭合浮动*/
    padding: 10px;
    /* clear: both; */ /*清除浮动*/
}

.box1 p.p2{
    background: red;
    display: table; /*闭合浮动*/
    padding: 10px;
}

当我把p.p1处的clear:both; 注释去掉 ，其实就是清除浮动的效果如图：

通过上面代码和图片的展示 我们很容易区分清除浮动和闭合浮动的区别！！！！

菜鸟笔记：仅供参考！