BFC是一种独立的渲染区域，防止元素间的相互影响。当元素满足特定条件如float不为none、overflow不为visible等时，会形成BFC。BFC布局规则包括处理浮动元素高度、避免margin重叠等。在开发中，BFC常用于阻止margin重叠、包含浮动元素和自适应布局。使用float或position可能导致元素脱离文档流，影响其他元素定位。
block formatting context，块级格式化上下文，是一个独立的渲染区域
让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响
触发条件：
- float的值不为none
- overflow的值不为visible
- display的值为table-cell、table-caption和inline-block之一
- position的值不为static、relative之一
IE下，通过zoom:1触发
以上触发条件，只要满足一个，就会形成BFC
BFC布局规则：
浮动的元素会被父级计算高度（父级触发BFC）
非浮动元素不会覆盖浮动元素的位置（非浮动元素触发了BFC）
margin不会传递给父级（父级触发BFC）
属于同一BFC的2个相邻元素上下会重叠
普通文档流布局：
浮动元素不会被父级重新计算高度
非浮动元素会覆盖浮动元素的位置
margin会传递给父级
相邻元素上下margin重叠
开发中的应用：
阻止margin重叠
可以包含浮动元素—清除内部浮动（原理是两个div处于同一个BFC区域之内）
自适应两栏布局
可以阻止元素被浮动元素覆盖
用float/position的缺点：会脱离文档流，影响到其它元素的定位
扫一扫
1642
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
