关于BFC与高度塌陷的问题

这个概念我大概是去年时候接触到的吧，略略记录了一下，没有深入研究，恰逢最近秋招，在这里写一写，顺便加深自己的印象。

<p class="p1">
    <p class="p2">p2</p>
    <p class="p3">p3</p></p><p class="p4"></p> 

            .p1{
                width: 50px;
                background-color: #bfc;
                margin-bottom:50px;
            }
            .p2{
                width: 50px; height: 50px;
                background-color: #0000FF;
                margin-bottom:50px;
                color: #fff;
            }
            .p3{
                width: 50px;height: 50px;
                background-color: #0000FF;
                margin:50px 0 50px 0;
                color: #fff;            
            }
            .p4{width: 100px; height: 100px;background-color: #bfc; } 

.clear:after{
    content: '';
    clear: both;
    display: block;    
} 

　　　　　 把这个类添加到高度塌陷的父元素上即可。

　　　　这里顺便讲讲这个做法的原理吧。

　　　 一个元素开启浮动后，其旁边的留白部分如果够后面的元素补上，后面的元素就会补上，后面的元素（一定要非浮动）加了clear后， 就可以清除其周围浮动的效果，使其不会补到上面去，就可以把父元素的高度撑开。

　　　　利用这个原理，我们在父元素后面增加一个:after伪元素，让其清除浮动，又不至于补上浮动的留白，从css增加空的content对比直接增加 空p的好处就是避免增加多余的dom节点。

以上就是关于BFC与高度塌陷的问题的详细内容，更多请关注Gxl网其它相关文章！

查看更多关于关于BFC与高度塌陷的问题的详细内容...