南顺网络

css中BFC概念

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

IE下为 Layout，可通过 zoom:1 触发

• 触发条件:

• 根元素

• positon: absolute/fixed

• display: inline-block / table

• float 元素

• ovevflow !== visible

• 规则:

• 属于同一个 BFC 的两个相邻 Box 垂直排列

• 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠

• BFC 中子元素不会超出他的包含块

• BFC 的区域不会与 float 的元素区域重叠

• 计算 BFC 的高度时，浮动子元素也参与计算

• 文字层不会被浮动层覆盖，环绕于周围

• 应用:

• 阻止margin重叠

• 可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个div都位于同一个 BFC 区域之中)

• 自适应两栏布局

• 可以阻止元素被浮动元素覆盖

编辑:--ns868