前言：概念性的东西容易遗忘，所以要经常拎出来温顾一下，加深一下自己的记忆
一、什么是BFC
BFC 全称为块级格式化上下文(Block Formatting Context)。它规定了元素如何对其内容进行定位以及其他元素的关系和相互作用，当涉及到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其他环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的位置主要受该浮动元素影响，两个浮动元素之间是互不影响的。BFC 可以看作一个独立的容器，容器内外互不影响。二、BFC的触发条件
1.根元素或包含根元素的元素2.浮动元素（元素的float 不是 none。
3.绝对定位元素（元素的position为absolute或fixed）
4.行内块元素（元素的display为inline-block）
5.表格单元格（元素的display为table-cell HTML表格单元格默认为该值）
6.表格标题（元素的display为table-caption HTML表格单元格默认为该值）
7.匿名表格单元格（元素的display为table、table-row、table-row-group、table-head-group、table-footer-group(分别是HTML table、row、tbody、thead、tfoot的默认属性)或inline-table.）
8.overflow值不为visible的块元素。
9.contain值为layout、content、strict的元素
10.弹性元素（display为flex或inline-flex元素的直接子元素）
11.网格元素（display为grid或inline-grid元素的直接子元素）
12.多列容器（元素的column-count或column-width不为auto包括column-count为1）
三、BFC的约束规则
1. BFC内部的BOX会在垂直方向上一个接一个排列2. 垂直方向上测距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠。
3.每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此（这说明BFC中的子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
4.BFC的区域不会与float的元素区域重叠。
5.计算BFC高度时,浮动子元素也参与计算。
6.BFC就是页面上的一个隔离的独立容器，容器里的子元素不会影响到外面的元素，反之亦然。
