BFC及其应用

[GGXXMM]

一、BFC

1.1 概念

BFC（Block Formatting Context）块级格式化上下文，是页面盒模型的一种CSS渲染模式。具有BFC特性的元素可以看做是一个的独立容器，容器里面的元素不会在布局上影响到外面的元素。

1.2 如何创建BFC

• 浮动元素（float不为none）
• 绝对定位（position为absolute或fixed）
• 行内块元素（display为inline-block）
• 表格单元格（display为table-cell）
• 表格标题（display为table-caption）
• 匿名表格单元格元素（display为table、table-row、table-row-group、table-header-group、table-footer-group[分别是table、row、tbody、thead、tfoot默认属性]或inline-table）
• overflow值不为visible的元素
• contain 值为 layout、content 或 paint 的元素
• 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
• 网格元素（display 为 grid 或 inline-grid 元素的直接子元素）

二、BFC的应用

参考： https://juejin.cn/post/7057918157972832292#heading-4

2.1 防止父元素“高度塌陷“

2.2 解决margin重叠的问题

2.2 清除浮动

2.3 实现两列布局（一列定宽，一列自适应）