前言
一、FC的概念
FC全称是Formatting Context（格式化上下文），元素在标准流里面都是属于一个FC。
- 块级（
block-level）元素的布局属于BFC（Block formatting context）。如：div、p、h1、h2......。 - 行级（
inline-level）元素的布局属于IFC（Inline formatting context）。如：a、span、i。
一、BFC（块格式化上下文）
1.会创建BFC的情况
- 根元素（
< html>） - 浮动元素（元素的
float不是none） - 绝对定位（元素的
position为absolute或fixed） - 行内块元素（元素的
display为inline-block） - 表格单元格（元素的
display为table-cell），表格标题（元素的display为table-caption） - 匿名表格单元格元素
- overflow计算值不为visible的块元素
- 弹性元素
- 网格元素
- display值为flex-root的元素
2.BFC的作用
1.说明
- 在
BFC中 ，box会在垂直方向上一个挨着一个的排布。 - 垂直方向的间距由
margin属性决定。 - 在同一个
BFC中，相邻两个box之间的margin会折叠。 - 在
BFC中，每个元素的左边缘是紧挨着包含块的左边缘的。
总结：帮我们处理布局问题。主要解决margin的折叠问题，解决浮动高度塌陷的问题。
2.解决margin的折叠问题
因为在同一个BFC中，相邻两个box之间的margin会折叠。所以让两个box处于不同的BFC可以解决折叠问题。
3.解决浮动高度塌陷的问题
3.1.条件
- 浮动元素的父元素触发
BFC。 - 浮动元素的父元素的
height是auto。
3.2.方案
浮动元素的父元素设置overflow：auto。
3.3.解读计算高度的方式
- 如果只有
inline-level，是行高的顶部和底部的距离 - 如果有
block-level，是由最底层的块上边缘和最底层块盒子的下边缘的距离 - 如果有绝对定位，被忽略
如果有浮动元素，会增加高度以包括这些浮动元素的下边缘
