這個概念我大概是去年時候接觸到的吧，略略記錄了一下，沒有深入研究，恰逢最近秋招，在這裡寫一寫，順便加深自己的印象。
頁面中的元素都隱含一個屬性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中文網其他相關文章！
