BFC ：块格式化上下文整体认识

BFC（Block Formatting Context）提供了一个环境，并让HTML元素在这个环境中按照一定规则进行布局。我们需要知道，在一个环境中，元素不会影响到其它环境中的布局。

比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，并且两个浮动元素之间互不影响。可以认为BFC就是一个独立的行政特区，可以把它理解成是一个独立的容器，并且这个容器的里 box 的布局，与这个容器外的毫不相干，反之，其外界也与内部没关系。

三种定位方法

常规流(Normal flow)

在常规流中，盒一个接着一个排列;
在块级格式化上下文里面，它们竖着排列；
在行内格式化上下文里面，它们横着排列;
当position为static或relative，并且float为none时会触发常规流；
对于静态定位(static positioning)，position: static（默认值），盒的位置是常规流布局里的位置；
对于相对定位(relative positioning)，position: relative（以角落为原点做坐标轴定位，处于正常文档流），盒偏移位置由这些属性定义top，bottom，left and right。即使有偏移，仍然保留原有的位置，其它常规流不能占用这个位置。

浮动(Floats)

盒称为浮动盒(floating boxes)；
它位于当前行的开头或末尾；
这导致常规流环绕在它的周边，除非设置 clear 属性。

绝对定位(Absolute positioning)

绝对定位方案，盒从常规流中被移除，不影响常规流的布局。
它的定位相对于它的包含块，相关CSS属性：top，bottom，left及right。
如果元素的属性position为absolute或fixed，它是绝对定位元素。
对于position: absolute，元素定位将相对于最近的一个relative、fixed或absolute的父元素，如果没有则相对于body。

如何触发BFC（满足任何一个）

float的值不是none。
position的值是absolute或者fixed。
display的值是inline-block、table-cell、flex、table-caption或者inline-flex。
overflow的值不是visible。
display: flex 或 inline-flex

BFC的范围

一个BFC包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的内部元素。（包含内部1，但内部1如果还有内部2就让内部1包含内部2）

用代码打个比方：

<div id='1' class='BFC'>
    <div id='2'>
        <div id='3'></div>
        <div id='4'></div>
    </div>
    <div id='5' class='BFC'>
        <div id='6'></div>
        <div id='7'></div>
    </div>
</div>

假设class='BFC'意思是这个盒子具有BFC属性。那么盒子2,3,4,5都属于盒子1创建的BFC。而盒子6,7属于盒子5创建的BFC。

也同时说明，一个元素只能由一个BFC包含。

BFC的布局规则

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。

BFC的功能

用于清除浮动，计算BFC高度

HTML部分

<div class="box">
	<div class="one">one</div>
	<div class="two">two</div>
</div>

CSS部分

.box{border: 10px solid blue;width: 600px;}
.one,.two{background-color: pink;width: 280px;height: 250px;
          float: left;font-size: 100px;margin: 10px;
          text-align: center;line-height: 250px}

这时：

由于子元素浮动导致父元素塌陷，需要BFC生效修改部分： .box{border: 10px solid blue;width: 600px;overflow:hidden} 这里给父元素添加 overflow:hidden，使父元素触发BFC

防止垂直 margin 重叠

防止相加的外边距仅保留最大值

HTML部分：

 <div class ="father">
    <div class ="first-child">box1</div>
    <div class ="second-child">box2</div>
    <div class ="three-child">box3</div>
</div>

CSS部分：

*{margin: 0; padding: 0;}
.father{width: 2000px; height: 200px; background:#0016d9;}
.first-child{   margin-top: 20px;  background: chocolate; width: 60px; height: 60px;}
.second-child{ background: chartreuse; width: 60px; height: 60px;   margin-bottom: 20px;  }
.three-child{   margin-top:40px;   background: fuchsia; width: 60px; height: 60px;}

效果如下：

按设计：box1应该在蓝色父盒子中margin-top=20px（box1上面应该有蓝色部分）; 按设计：box2下外边距20px，box3上外边距40px，中间相隔60px的空间，但是实际只有40px（发生了折叠）。

问题所在：

外面的父元素就是一个最大的BFC，我们看到的这些元素就在这个大的BFC里面发生了margin折叠。

解决方案：

让发生折叠的地方建立独立的BFC，因此我们可以给蓝色框加一个属性overflow：hidden，然后给box2和box3再加一个父级框，并添加可以构造BFC的属性。

修改后：

HTML部分

 <div class="father">
    <div class="first-child">box1</div>
    
    <div style="overflow: hidden">
        <div class="second-child">box2</div>
    </div>
    
    <div style="float: left">
        <div class="three-child">box3</div>
    </div>
</div>