塊級格式化上下文（ Block formatting contexts）

那么如何觸發(fā)BFC呢？

• float 除了none以外的值 
• overflow 除了visible 以外的值（hidden，auto，scroll ） 
• display (table-cell，table-caption，inline-block) 
• position（absolute，fixed） 
• fieldset元素

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任然屬于文檔中的普通流。

摘錄自：http://www.iyunlu.com/view/css-xhtml/55.html