需要注意的是，display:table 本身并不會創(chuàng)建BFC把兔，但是它會產生匿名框(anonymous boxes)沪伙，而匿名框中的display:table-cell可以創(chuàng)建新的BFC，換句話說县好，觸發(fā)塊級格式化上下文的是匿名框围橡，而不是display:table。所以通過display:table和display:table-cell創(chuàng)建的BFC效果是不一樣的缕贡。
fieldset 元素在www.w3.org里目前沒有任何有關這個觸發(fā)行為的信息翁授，直到HTML5標準里才出現(xiàn)。有些瀏覽器bugs（Webkit晾咪，Mozilla）提到過這個觸發(fā)行為收擦，但是沒有任何官方聲明。實際上谍倦，即使fieldset在大多數(shù)的瀏覽器上都能創(chuàng)建新的塊級格式化上下文塞赂，開發(fā)者也不應該把這當做是理所當然的。CSS 2.1沒有定義哪種屬性適用于表單控件昼蛀，也沒有定義如何使用CSS來給它們添加樣式宴猾。用戶代理可能會給這些屬性應用CSS屬性，建議開發(fā)者們把這種支持當做實驗性質的叼旋，更高版本的CSS可能會進一步規(guī)范這個误褪。

BFC的特性：
1)塊級格式化上下文會阻止外邊距疊加
當兩個相鄰的塊框在同一個塊級格式化上下文中時回论，它們之間垂直方向的外邊距會發(fā)生疊加。換句話說，如果這兩個相鄰的塊框不屬于同一個塊級格式化上下文咒程，那么它們的外邊距就不會疊加祝辣。
2)塊級格式化上下文不會重疊浮動元素
根據(jù)規(guī)定，一個塊級格式化上下文的邊框不能和它里面的元素的外邊距重疊。這就意味著瀏覽器將會給塊級格式化上下文創(chuàng)建隱式的外邊距來阻止它和浮動元素的外邊距疊加撞羽。由于這個原因，當給一個挨著浮動的塊級格式化上下文添加負的外邊距時將會不起作用（Webkit和IE6在這點上有一個問題——可以看這個測試用例）衫冻。
3)塊級格式化上下文通尘魑桑可以包含浮動
詳見： W3C CSS2.1 - 10.6.7 'Auto' heights for block formatting context roots
通俗地來說：創(chuàng)建了 BFC的元素就是一個獨立的盒子，里面的子元素不會在布局上影響外面的元素隅俘，反之亦然邻奠，同時BFC任然屬于文檔中的普通流。
至此为居，您或許明白了為什么 overflow:hidden或者auto可以閉合浮動了碌宴，真是因為父元素創(chuàng)建了新的BFC。對于張鑫旭在對《overflow與zoom”清除浮動”的一些認識 》一文中對于用包裹來解釋閉合浮動的原理蒙畴，我覺得是不夠嚴謹?shù)姆×停覜]有依據(jù)。并且說道“Firefox等瀏覽器并沒有haslayout的概念”膳凝，那么現(xiàn)代瀏覽器是有BFC的碑隆，從表現(xiàn)上來說，hasLayout 可以等同于 BFC蹬音。
IE6-7的顯示引擎使用的是一個稱為布局（layout）的內部概念上煤，由于這個顯示引擎自身存在很多的缺陷，直接導致了IE6-7的很多顯示bug著淆。當我們說一個元素“得到 layout”劫狠，或者說一個元素“擁有 layout” 的時候，我們的意思是指它的微軟專有屬性 hasLayout http://msdn.microsoft.com/worksh ... rties/haslayout.asp 為此被設為了 true 永部。IE6-7使用布局的概念來控制元素的尺寸和定位独泞，那些擁有布局（have layout）的元素負責本身及其子元素的尺寸設置和定位。如果一個元素的 hasLayout 為false苔埋，那么它的尺寸和位置由最近擁有布局的祖先元素控制阐肤。
觸發(fā)hasLayout的條件：
position: absolute
float: left|right
display: inline-block
width: 除 “auto” 外的任意值
height: 除 “auto” 外的任意值 （例如很多人閉合浮動會用到 height: 1% ）
zoom: 除 “normal” 外的任意值 (MSDN) http://msdn.microsoft.com/worksh ... properties/zoom.asp
writing-mode: tb-rl (MSDN) http://msdn.microsoft.com/worksh ... ies/writingmode.asp

在 IE7 中，overflow 也變成了一個 layout 觸發(fā)器：
overflow: hidden|scroll|auto （ 這個屬性在IE之前版本中沒有觸發(fā) layout 的功能讲坎。 ）
overflow-x|-y: hidden|scroll|auto （CSS3 盒模型中的屬性孕惜，尚未得到瀏覽器的廣泛支持。他們在之前IE版本中同樣沒有觸發(fā) layout 的功能）

hasLayout更詳細的解釋請參見 old9翻譯的 大名鼎鼎的 《On having layout》一文（英文原文：http://www.satzansatz.de/cssd/onhavinglayout.htm）晨炕，由于old9博客被墻衫画，中文版地址：
IE8使用了全新的渲染引擎，刪除了 hasLayout 原本的功能瓮栗，因此徹底杜絕了很多深惡痛絕的 bug削罩，但 IE8~IE11 通過「document.documentElement.currentStyle.hasLayout」依然可以獲得 hasLayout 的標志瞄勾，我寫了一個測試 Demo（IE8 中 zoom:1 返回 false），更詳細的請看《IE8 haslayout = true》

IE8-11獲取 hasLayout

四以蕴、閉合浮動方法——精益求精
上面已經(jīng)列舉了7種閉合浮動的方法糙麦，通過第三節(jié)分析的原理，我們發(fā)現(xiàn)其實更多的：display：table-cell丛肮，display：inline-block等只要觸發(fā)了BFC的屬性值都可以閉合浮動赡磅。從各個方面比較，after偽元素閉合浮動無疑是相對比較好的解決方案了宝与，下面詳細說說該方法焚廊。
.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }

1. display:block 使生成的元素以塊級元素顯示,占滿剩余空間;
2. height:0 避免生成內容破壞原有布局的高度。
3. visibility:hidden 使生成的內容不可見习劫，并允許可能被生成內容蓋住的內容可以進行點擊和交互;
   4）通過 content:"."生成內容作為最后一個元素节值，至于content里面是點還是其他都是可以的，例如oocss里面就有經(jīng)典的 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",有些版本可能content 里面內容為空,一絲冰涼是不推薦這樣做的,firefox直到7.0 content:”" 仍然會產生額外的空隙榜聂；
   5）zoom：1 觸發(fā)IE hasLayout。
   通過分析發(fā)現(xiàn)嗓蘑，除了clear：both用來閉合浮動的须肆，其他代碼無非都是為了隱藏掉content生成的內容，這也就是其他版本的閉合浮動為什么會有font-size：0桩皿，line-height：0豌汇。

精益求精方案一：
相對于空標簽閉合浮動的方法代碼似乎還是有些冗余，通過查詢發(fā)現(xiàn)Unicode字符里有一個“零寬度空格”泄隔，也就是U+200B 拒贱，這個字符本身是不可見的，所以我們完全可以省略掉 visibility:hidden了
.clearfix:after {content:"200B"; display:block; height:0; clear:both; }
.clearfix { zoom:1; }.
精益求精方案二：
由Nicolas Gallagher 大濕提出來的,原文:A new micro clearfix hack佛嬉，該方法也不存在firefox中空隙的問題逻澳。
/ For modern browsers /
.cf:before,.cf:after {
content:"";
display:table;
}
.cf:after { clear:both; }/ For IE 6/7 (trigger hasLayout) /
.cf { zoom:1; }
** 需要注意的是：*
上面的方法用到了 ：before偽元素，很多人對這個有些迷惑暖呕，到底我什么時候需要用before呢斜做？為什么方案一沒有呢？其實它是用來處理margin邊距重疊的湾揽，由于內部元素 float 創(chuàng)建了BFC瓤逼，導致內部元素的margin-top和 上一個盒子的margin-bottom 發(fā)生疊加笼吟。如果這不是你所希望的，那么就可以加上before霸旗，如果只是單純的閉合浮動贷帮，after就夠了！并不是如同大漠《Clear Float》一文所說的：但只使用clearfix:after時在跨瀏覽器兼容問題會存在一個垂直邊距疊加的bug诱告，這不是bug撵枢，是BFC應該有的特性。

邊距疊加測試.jpg