块级格式化上下文
块级格式化上下文：Block Formatting Context，简称BFC。
它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局。
1. 区域中常规流块盒的布局规则
- 常规流块盒在水平方向上，必须撑满包含块；
- 常规流块盒在包含块的垂直方向上依次摆放；
- 常规流块盒若外边距无缝相邻，则进行外边距合并；
- 常规流块盒的自动高度和摆放位置，无视浮动元素/定位元素。
视觉格式化模型中包含块级格式化上下文，上述规则是由块级格式化上下文决定的。
2. BFC渲染区域
这个区域由某个HTML元素创建，以下元素会在其内部创建BFC区域：
- 根元素：意味着，
<html>元素创建的BFC区域，覆盖了网页的所有元素； - 浮动和绝对/固定定位元素：注意是元素内部创建BFC区域；
- overflow不等于visible的块盒；
- 行块盒；
- display为table的元素；
等
3. 独立的BFC渲染区域
不同的BFC区域，他们进行渲染时互不干扰。
创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部。
具体规则：
- 创建BFC的元素，它的自动高度需要计算浮动元素；
通过这条BFC规则，可以解决浮动高度坍塌的问题，只要将高度坍塌的元素设置成能够创建BFC的元素即可，但是将此元素改为浮动或定位元素可能会改变页面布局，通常会使用更改该元素的overflow属性的方法实现，此方法副作用最小。实在不能用这种创建BFC区域的方法，则用clearfix的方法。在实际中，如果仅仅要解决高度坍塌，还是建议使用clear的方法，毕竟这是专门解决高度坍塌问题的方法，没有副作用。
- 创建BFC的元素，它的边框盒不会与浮动元素重叠，会避开浮动元素排列；
可以应用于侧边栏的布局。
- 创建BFC的元素，不会和它的子元素进行外边距合并，因为这两个元素属于不同的BFC区域。
372
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
