關於BFC與高度塌陷的問題

　　　　這個概念我大概是去年時候接觸到的吧，略略記錄了一下，沒有深入研究，恰逢最近秋招，在這裡寫一寫，順便加深自己的印象。

　　　什麼是BFC?

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

 　　　BFC有什麼用？如何開啟BFC？開啟BFC後會發生什麼事？

　　　在這裡我們先來看看幾個小情境。並且拋出幾個另外的問題

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

　　　　①我們來看一下，這裡有四個盒子，藍色為50px;

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

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

　　　　②那麼兄弟元素之間呢?p2和p3之間的距離也是50px，也就是說他們之間的垂直外邊距也被折疊了。

 

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

　　　　①先明確一點，水平外邊距是無論如何都不會重疊的，所以第一點就是垂直。

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

#　　　　由代碼可以看出p1和p3、p2和p3都是相鄰關係。所以垂直外邊距被折疊。

　　　　

#　　　　那麼假設咱有這麼一個需求，要垂直外邊距不重疊（實際上很少有這種需求），那麼BFC就派上用場了。我們先看看效果再談談怎麼搞。

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

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

　　　　弟元素之間的效果。

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

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

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

 

　　　　（2） 还是刚刚的例子，把p2和p4去掉，p3开启浮动，此时父元素p1发生高度塌陷

　　　　当我们开启p1的BFC后成功解决由于浮动引起的高度塌陷。原理是开启了BFC的元素，其子元素也会参与到高度计算中。

　　　　即第二个作用就是避免浮动引起的高度塌陷

　　　　接下来来说说如何开启BFC：overflow(非visible)【注意在处理父子外边距折叠时应是父元素开启BFC】、float(非none)、position(非static和relative)、display(inlined-block、table-cell、table-caption)。其中之一即可。

　　　　兼容：在ie6中没有BFC，但有hasLayout，与BFC类似。开启：直接将元素的zoom设置为1。 zoom表示放大的意思，后面跟一个数字，即放大倍数。

　　　　那么有的时候的需求是父元素不能动overflow，那要解决高度塌陷怎么办，还有另外的清除浮动方案。

　　　　挺多的，百度都有，那这里就举一个最常用的例子吧。

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

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

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

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

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

以上是關於BFC與高度塌陷的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！