说说对BFC的理解

[sweetXiaoyan]

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

• 触发条件 (以下任意一条)
  • float的值不为none
  • overflow的值不为visible
  • display的值为table-cell、tabble-caption和inline-block之一
  • position的值不为static或则releative中的任何一个

在IE下, Layout,可通过zoom:1 触发

• .BFC布局与普通文档流布局区别
  普通文档流布局:

  1. 浮动的元素是不会被父级计算高度
  2. 非浮动元素会覆盖浮动元素的位置
  3. margin会传递给父级元素
  4. 两个相邻元素上下的margin会重叠

  BFC布局规则:

  1. 浮动的元素会被父级计算高度(父级元素触发了BFC)
  2. 非浮动元素不会覆盖浮动元素的位置(非浮动元素触发了BFC)
  3. margin不会传递给父级(父级触发BFC)
  4. 属于同一个BFC的两个相邻元素上下margin会重叠

• 开发中的应用

  • 阻止margin重叠
  • 可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个 div都位于同一个 BFC 区域之中)
  • 自适应两栏布局
  • 可以阻止元素被浮动元素覆盖