BFC
MDN对BFC的解释：块格式化上下文（Block Formating Context, BFC）是web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
1、开启BFC
flow-root对内容的影响是最低的，但是IE浏览器不支持。
- 根元素
- 浮动元素
- 绝对定位、固定定位的元素
- 行内块元素
- 表格单元格：table、thead、tbody、th、td、tr、caption
- overflow的值不为visible的块元素
- 伸缩元素
- 多列容器
- column-span为all的元素（即使该元素没有包裹在多列容器中）
- display的值，设置为flow-root
2、BFC作用
- 元素开启BFC后，其子元素不会再产生margin塌陷问题；
- 元素开启BFC后，自己不会被其他浮动元素所覆盖；
- 元素开启BFC后，就算其子元素浮动，元素自身高度也不会塌陷。
3、mrgin塌陷的解决
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>示例</title><style>body {display: flex;}.outer {width: 500px;background-color: aqua;/* 浮动元素 *//* float: left; *//* 开启定位元素 *//* position: relative; *//* 行内块元素 *//* display: inline-block; *//* 表格单元格 *//* display: table; *//* overflow不为visible *//* overflow: hidden; *//* 多列容器 *//* column-count: 1; *//* column-span: all; *//* display: flow-root; */}.inner {height: 200px;width: 200px;margin: 20px;}.inner1 {background-color: yellow;}.inner2 {background-color: blueviolet;}</style>
</head><body><div class="outer"><div class="inner inner1"></div><div class="inner inner2"></div></div>
</body></html>