一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。
前情提要
了解什么是BFC之前先了解下文档流。
- 文档流：英文名称是normal flow。是指HTML中元素在计算布局排版的过程中，所有处于文档流中的元素会自动的从左到右（非块级元素），从上到下（块级元素）的规则排列。
- 文档流分为三种：
- 普通流：从左到右（行内元素），从上到下（块级元素）
- 浮动流(flot)：先按照普通流排列，再根据浮动方向进行排列
- 定位流(position: absolute/fixed)： 根据具体定位坐标排列
什么是BFC？
- BFC: 全拼是Block Formatting Context。意思是格式化上下文。是web页面中盒模型布局的css渲染模式，属于一个独立的渲染区域（渲染规则除几个特性之外与外部的渲染规则一致）。可以理解为一个沙箱，内部怎么样跟外部没有任何关系。
BFC的触发条件
- 浮动元素的flot值不为none。
- position的值不为static或者relative
- display的值为：flex，inline-block，table-cell，table-caption或者inline-flex
- overflow的值不是visible
- 根元素，即HTML元素
BFC的特性或者说BFC的作用
- 内部块级元素会在垂直方向上一个接一个的放置
- 垂直上的距离取决于margin值。同一个BFC区域内部相邻的box的margin会出现塌陷情况。
- 默认情况下(从左向右)每个元素的margin box的左边与包含块border box的左边相接触，如果是从右向左，则刚好相反
- BFC的独立渲染区域不会与浮动渲染区域重叠
- 计算BFC的高度时浮动元素也参与计算。
- BFC内部区域的渲染不会影响到外部区域。
- 元素的类型和
display属性，决定了这个块级元素的类型。不同类型的Box会参与不同的Formatting Context
