對于BFC與高度塌陷的問題

　　　什么是BFC?

　　　頁面中的元素都隱含一個(gè)屬性Block Formatting Context（塊級格式化上下文） 簡稱BFC。

　　　BFC有什么用？如何開啟BFC？開啟BFC后會發(fā)生什么？

　　　在這里我們先看看幾個(gè)小情境。并且拋出幾個(gè)另外的問題

　　�。�1）　　

<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; }

　　　�、傥覀儊砜匆幌拢�這里有四個(gè)盒子，藍(lán)色為50px；

　　　　豆沙綠的為父元素p1，其與子元素p3的margin-bottom都為50px

　　　　很明顯，父子元素的margin重疊了，距離最底部的p的下邊距為50px而不是100px。

　　　�、谀敲葱值茉�素之間呢?p2和p3之間的距離也是50px，也就是說他們之間的垂直外邊距也被折疊了。

　　　　好，那么接下來我們來探討下什么情況會觸發(fā)垂直外邊距的重疊。

　　　�、偈紫让鞔_一點(diǎn)，水平外邊距是無論如何都不會重疊的，所以第一點(diǎn)就是垂直。

　　　　②相鄰，何為相鄰，就是元素之間沒有被clear、內(nèi)容、padding、border隔開。（這里待會我們可以順便就此理清常見清除浮動的方法的原理）

　　　　由代碼可以看出p1和p3、p2和p3都是相鄰關(guān)系。所以垂直外邊距被折疊。

　　　　那么假設(shè)咱有這么一個(gè)需求，要垂直外邊距不重疊（實(shí)際中很少有這種需求），那么BFC就派上用場了。我們先看看效果再談?wù)勗趺锤恪?/span>

　　　　p1、p3開啟BFC（p1的overflow為auto或hidden，p3浮動）后，我們可以看到p2、p3之間的外邊距相加了而不是重疊，

　　　　p1和p3的下邊距也分開了。補(bǔ)充一下，父元素開啟BFC，就能取消與相鄰子元素的外邊距重疊（子可不開），這里全開是為了演示相鄰兄

　　　　弟元素之間的效果。

　　　　很重要一點(diǎn)就是一定要相鄰，假如中間隔了clear、內(nèi)容、padding、border，外邊距還是會重疊

　　　　嗯，這就是開啟BFC的第一個(gè)作用：避免相鄰元素的外邊距重疊。

　　　　實(shí)際上，相鄰元素只要有其中一個(gè)開啟了BFC即可，當(dāng)然這樣的話就要考慮清除浮動問題了，比如剛剛的例子，p3開啟浮動，p1不開啟BFC的話就會發(fā)生高度塌陷。

　　　　（2） 還是剛剛的例子，把p2和p4去掉，p3開啟浮動，此時(shí)父元素p1發(fā)生高度塌陷

　　　　當(dāng)我們開啟p1的BFC后成功解決由于浮動引起的高度塌陷。原理是開啟了BFC的元素，其子元素也會參與到高度計(jì)算中。

　　　　即第二個(gè)作用就是避免浮動引起的高度塌陷

　　　　接下來來說說如何開啟BFC：overflow(非visible)【注意在處理父子外邊距折疊時(shí)應(yīng)是父元素開啟BFC】、float(非none)、position(非static和relative)、display(inlined-block、table-cell、table-caption)。其中之一即可。

　　　　兼容：在ie6中沒有BFC，但有hasLayout，與BFC類似。開啟：直接將元素的zoom設(shè)置為1。 zoom表示放大的意思，后面跟一個(gè)數(shù)字，即放大倍數(shù)。

　　　　那么有的時(shí)候的需求是父元素不能動overflow，那要解決高度塌陷怎么辦，還有另外的清除浮動方案。

　　　　挺多的，百度都有，那這里就舉一個(gè)最常用的例子吧。

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

　　　　　把這個(gè)類添加到高度塌陷的父元素上即可。

　　　　這里順便講講這個(gè)做法的原理吧。

　　　 一個(gè)元素開啟浮動后，其旁邊的留白部分如果夠后面的元素補(bǔ)上，后面的元素就會補(bǔ)上，后面的元素（一定要非浮動）加了clear后，就可以清除其周圍浮動的效果，使其不會補(bǔ)到上面去，就可以把父元素的高度撐開。

　　　　利用這個(gè)原理，我們在父元素后面增加一個(gè):after偽元素，讓其清除浮動，又不至于補(bǔ)上浮動的留白，從css增加空的content對比直接增加空p的好處就是避免增加多余的dom節(jié)點(diǎn)。

以上就是關(guān)于BFC與高度塌陷的問題的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！