BFC格式化上下文

概念：

中文翻译为格式化上下文，是一块独立的渲染环境，该环境的内部元素布局不影响外部，外部元素的布局不影响内部

如何形成：

• 根元素
• 浮动元素
• 绝对定位元素
• 行级块元素
• overflow不为visible的元素

规则

1.属于同一个BFC的两个相邻Box的上下margin会发生重叠 ；

例子：

image.png

image.png

解决方案：不让这两个元素在同一个BFC中

image.png

2.计算BFC的高度时，浮动元素也参与计算
例子：BFC只有浮动元素，父级元素会发生高度塌陷
解决方案：给父级元素的overflow为hidden

避免被浮动元素遮挡
3.每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；

4. BFC的区域不会与float重叠；
   

   例子：
   image.png
   
   解决方案：利用规则4，让红色区域独立成为一个BFC