BFC

weixin_44789117發表於2020-10-12

BFC: 塊級格式上下文

BFC的作用

  • 形成一個完全獨立的空間,讓空間中的子元素不會影響到外面的佈局

BFC觸發的條件

  1. float不為none
  2. position不為relative 和 static
  3. overflow 不為 visable
  4. display的值為 table-cell ,inline-block,flex,inline-block,table-caption

通過觸發BFC解決的問題

  1. 浮動元素的父元素高度塌陷
  2. 兩欄自適應佈局
  3. 外邊距垂直方向重合