目录
什么是BFC
BFC全称(Block formatting context) 意为："块级格式化上下文"。
它就像我们学校分班级一样，虽然都是一个学校，但是每个班是独立的，不相干扰的。
<div class="main">
<div class="left">这是div1</div>
<div class="right">这是div2</div>
</div>例如上述的三个div，"main" 有两个子标签 "left" 和 "right" ，BFC的作用就是分别让这两个子标签形成独立的容器，left 的属性不会应用到 right 中。
能触发BFC的标签或属性
1：根元素<html> (相当于最外层的网页界面的子元素自动遵守BFC规则排列）
2：浮动（float : left 及 float : right）
3：绝对定位和固定定位（position: absolute及position: fixed）
4：设置行内块元素和弹性布局（display：inline-block，flex）
5：内容隐藏（overflow：hidden）
仔细观察，它们都有一个共同的特性：脱离文档流。换句话说，能脱离文档流就会触发BFC。
BFC布局的标准规则
虽然BFC会让容器独立，但是布局的规则还是不变的
1：触发BFC规则的标签，他内部的子标签只能在垂直方向一个一个排列，而不能横着排。
2：内部子标签垂直方向的距离由外边距由margin决定，并且两个相邻子标签外边距会重叠，谁的外边距大，就显示多少
3：计算距离时，会优先考虑top,bottom等定位，再考虑外边距
4：触发BCF的容器不会与其他触发BFC的容器重叠，只会相应的排在后面
5：由于继承关系，子容器的上外边距会传递给父元素，这时让父元素触发BFC形成独立容器，那么子元素将不会将上边距传给父元素
6：触发BFC的元素中，若子容器脱离文档流，那么计算高度时，也会计算子容器高度(该规则的体现见css(3) 浮动之解决父容器高度塌陷方法二)