1. 程式人生 > >BFC是什麽?是清除浮動的一種方法

BFC是什麽?是清除浮動的一種方法

hang class img 子元素 ble lock orm pos 內部


BFC全稱”Block Formatting Context”, 中文為“塊級格式化上下文”。

BFC元素特性表現原則就是,內部子元素再怎麽翻江倒海,翻雲覆雨都不會影響外部的元素。所以,避免margin穿透啊,清除浮動什麽的也好理解了。

什麽時候會觸發BFC呢?常見的如下:

  • float的值不為none
  • overflow的值為auto,scrollhidden
  • display的值為table-cell, table-caption, inline-block中的任何一個。
  • position的值不為relativestatic

BFC和float元素做相鄰兄弟時候會發現,普通流體元素BFC後,為了和浮動元素不產生任何交集,順著浮動邊緣形成自己的封閉上下文。如下截圖:

技術分享

BFC是什麽?是清除浮動的一種方法