定义
一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。
触发BFC的条件
- 根元素或其它包含它的元素（略过不谈）；
- 浮动元素 (元素的 float 不是 none)；
- 绝对定位元素 (元素具有 position 为 absolute 或 fixed)；
- 内联块 (元素具有 display: inline-block)；
- 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)；
- 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)；
- 具有overflow 且值不是 visible 的块元素；
- display: flow-root （推荐使用）；
- column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中；
BFC特性
- 内部的Box会在垂直方向上一个接一个的放置；
- 垂直方向上的距离由margin决定；
- bfc的区域不会与float的元素区域重叠；
- 计算bfc的高度时，浮动元素也参与计算；
- bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素；
为什么要使用触发BFC？
- BFC可以解决子元素浮动导致父元素高度塌陷问题；
- BFC可以解决两个兄弟盒子之间的垂直距离是由他们的外边距所决定的，但不是他们的两个外边距之和，而是以较大的为准，即margin重叠问题；
- 不被浮动元素覆盖；
- 防止文字环绕；
原创文章，作者：ZERO，如若转载，请注明出处：https://www.edu24.cn/course/css/css-bfc.html
微信扫一扫 
支付宝扫一扫 
