BFC (塊級格式化上下文)

geekyzs發表於2019-03-13

具有 BFC 特性的元素可以看作是隔離了的獨立容器,容器裡面的元素不會在佈局上影響到外面的元素,並且 BFC 具有普通容器所沒有的一些特性。

只要元素滿足下面任一條件即可觸發 BFC 特性:

  • body 根元素
  • 浮動元素:float 除 none 以外的值
  • 絕對定位元素:position (absolute、fixed)
  • display 為 inline-block、table-cells、flex
  • overflow 除了 visible 以外的值 (hidden、auto、scroll)

BFC 特性及應用

  • 同一個 BFC 下外邊距會發生摺疊
  • BFC 可以包含浮動的元素(清除浮動)
  • BFC 可以阻止元素被浮動元素覆蓋
  • 用來實現兩列自適應佈局