关于BFC的那些事儿
- 什么是BFC？
BFC（block formating context）块级格式化上下文。是一种显示规则。 - BFC的布局规则有哪些？
a.内部盒子是垂直方向，一个接着一个地放置；
b.垂直方向上的距离由margin决定，属于同一个BFC，相邻盒子的margin值会重叠，按照最大的margin值算；
c.元素的margin-left以包含它的元素的左边为基准进行偏移；
d.BFC的区域不会与浮动盒子重叠；
e.BFC是页面上一个隔离的独立容器，容器中的元素不会影响到外面的元素；
f.在计算BFC的高度时，浮动元素的高度也算进去； - 哪些条件会触发BFC？
a.html（根标签）；
b.float的值不为none时；
c.position:absolute/fixed;
d.display:inline-block, table-cell, table-caption, flex ,inline-flex;
e.overflow不是visible时 - BFC的应用
（1）用于解决margin-top问题
当两个容器嵌套时，外层容器与内层容器之间没有元素，给子元素一个margin-top值，这个值不会作用于子元素，相反，会作用于父元素。
解决这个bug，给父元素overflow:hidden即可解决。原因在于：overflow:hidden会触发BFC，形成一个独立的容器。
（2）解决margin值重叠问题
垂直方向上的距离由margin决定，属于同一个BFC，相邻盒子的margin值会重叠，按照最大的margin值算；
给其中一个float:left，上下的margin值不会重叠。
（3）清除内部浮动
父元素中有两个浮动元素，由于父元素没有设置高度，会导致高度塌陷。
给父元素overflow:hidden触发BFC,根据BFC规则，BHC的高度会加上浮动元素，解决塌陷问题。
（4）自适应两栏布局
举例：
双飞燕布局
在写双飞燕布局的时候，先写左右两边的浮动元素，再写中间自适应元素，否则中间再进行自适应的时候会占据右边所有空间。
20200301 逆战班