BFC簡單理解

weixin_33785972發表於2018-05-18

以前有提到過overfllow : hidden/auto可以清除浮動，這裡生效的特性就是BFC，Block Formatting Contexts塊級格式化上下文。

BFC簡述

1. 功能
BFC特性可以讓元素擁有一定的隔離性、獨立性，使該元素不會影響到兄弟元素的佈局。比如避免浮動元素父元素高度塌陷；比如避免相連的 div 在垂直上的外邊距會發生疊加等。

2. 觸發BFC特性

  • 浮動，float 除 none 以外的值
  • position（absolute，fixed）
  • display 為以下其中之一的值 inline-blocks，table-cells，table-captions
  • overflow 除了 visible 以外的值（hidden，auto，scroll）

3. BFC特性的功能

  • 防止外邊距摺疊（外邊距摺疊的規則：僅當兩個塊級元素相鄰並且在同一個塊級格式化上下文時，它們垂直方向上的外邊距才會摺疊）。demo
  • BFC 包含浮動的元素時，不會有高度塌陷的問題（清除浮動帶來的影響，具體可以看文首提到的blog）。demo
  • BFC清浮動防兄弟浮動元素遮擋。demo

相關文章