BFC了解

BFC概念
什么是bfc？可能很多新手没听过，但一定遇到过，只是自己不知道而已，相信大家都遇到过，在最常见的浮动加盒模型布局中，我们会遇到一些问题，例如高度塌陷，高度自适应，又或者是浮动所带来的一些问题，这里面其实或多或少的都和bfc有点关系，所谓的bfc就是块级格式化上下文（独立的渲染区），通俗得讲就是块级元素布局逻辑。我个人理解为一个特别的块级元素。
BFC布局规则
有以下几点:
一、BFC内部的Box会在垂直方向，一个接一个地放置。
二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）
三、每个元素的margin box的左边， 与包含块border box的左边相接触
四、BFC的区域不会与float box重叠。
五、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
六、计算BFC的高度时，浮动元素也参与计算
在这里，我举些例子，例如，我们学习margin的时候会遇到一个bug，就是两个div竖直排列时，给两个设置margin时，一个设置margin-bottom：50px；一个设置margin-top:100px；会发现两者的间距不是150加的值，而是两者中较大的值，如这种情况。


会有这种情况，就是因为这两个box同属于一个bfc里面，而html根元素触发了bfc条件，所以两个盒子会有这种情况，符合第二布局规则。稍后我会说下触发bfc的所有条件。
还有一些情况比如因为浮动导致的高度塌陷情况，例：

可以看到当子元素浮动时，时撑不开父元素的，然而当我给父元素设置overflow:hidden；时，就可以了，这是因为此时父元素触发bfc条件就符合bfc布局规则第六点，所以父元素被撑开，有高度了，因为计算bfc高度时，会计算浮动元素的高，那么接下来我说下bfc触发条件。
BFC触发条件
根元素(html)
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
这些都是触发形成bfc块级元素的条件，上面我就是用了，根元素html和overflow，这两种形成的两种情况，且符合bfc两种布局规则，其他的大家可以都去一一试下。
在这个乙亥末，庚子春，大疫的情况下，在家就是为国家，为他人，为自己的最好方式，但也阻挡不了学习的热情，逆战！逆战！逆战！
只要你想赢，没人会让你输，来自一个菜鸡的理解