BFC 原理简介及应用

BFC

块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

• 触发条件
  • 根元素
  • position: absolute/fixed
  • display: inline-block/table
  • float 元素
  • overflow !== visible
• 规则
  • 属于同一个 BFC 的两个相邻 Box 垂直排列
  • 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
  • BFC 中的子元素的 margin box 的左边，与包含块（BFC） border box 的左边接触，浮动元素也一样（子元素 absolute 除外）
  • BFC 的区域不会与 float 的元素区域重叠
  • 计算 BFC 高度时，浮动子元素也参与计算
  • 文字层不会被浮动层覆盖，环绕于周围

应用

自适应两栏布局

规则：计算 BFC 高度时，浮动元素也参与计算。

防止垂直 margin 重叠

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此