淺談BFC與高度塌陷，淺談BFC塌陷

淺談BFC與高度塌陷，淺談BFC塌陷

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

 

　　　什麼是BFC?

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

 

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

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

　　　（1）　　

<div class="div1">    <div class="div2">div2</div>    <div class="div3">div3</div></div><div class="div4"></div>

 

            .div1{                width: 50px;                background-color: #bfc;                margin-bottom:50px;            }            .div2{                width: 50px; height: 50px;                background-color: #0000FF;                margin-bottom:50px;                color: #fff;            }            .div3{                width: 50px;height: 50px;                background-color: #0000FF;                margin:50px 0 50px 0;                color: #fff;                        }            .div4{width: 100px; height: 100px;background-color: #bfc; }    

 

 

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

　　　　豆沙綠的為父元素div1，其與子項目div3的margin-bottom都為50px

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

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

 

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

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

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

　　　　由代碼可以看出div1和div3、div2和div3都是相鄰關係。所以垂直外邊距被摺疊。

　　　　

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

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

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

　　　　弟元素之間的效果。

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

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

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

 

　　　　（2） 還是剛剛的例子，把div2和div4去掉，div3開啟浮動，此時父元素div1發生高度塌陷

　　　　當我們開啟div1的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對比直接增加空div的好處就是避免增加多餘的dom節點。