css-BFC

什么是 BFC

Block Formatting Context（块级格式化上下文）

Web 页面的可视 CSS 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域

布局规则

• 内部的 Box 会在垂直方向一个接一个地放置
• Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
• 每个盒子（块盒与行盒）的 margin box 的左边，与包含块 border box 的左边相接触，即使存在浮动也是如此
• BFC 的区域不会与 float box 重叠
• BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响外面的元素。反之也是如此
• 计算 BFC 的高度时，浮动元素也参与计算

如何创建 BFC

• 根元素或其他包含他的元素
• 浮动元素（元素的 float 不是 none）
• 绝对定位元素（元素具有 position 为 absolute 或 fixed）
• 内联块（元素具有 display: inline-block）
• 表格单元格（元素具有 display: table-cell ，HTML 表格单元格默认属性）
• 表格标题（元素具有 display: table-caption，HTML 表格标题默认属性）
• 具有 overflow 且值不是 visible 的块元素
• 弹性盒子（flex 或 inline-flex）
• css display: flow-root
• css column-span: all

BFC 作用

• 利用 BFC 避免 margin 重叠
• 自适应两栏布局
• 清除浮动