BFC学习

BFC(Block formatting context)

直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

触发BFC的条件：

• body根元素
• 设置浮动，不包括none
• 设置定位，absoulte或者fixed
• 行内块显示模式，inline-block
• 设置overflow，即hidden，auto，scroll
• 表格单元格，table-cell
• 弹性布局，flex

BFC布局规则：

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

BFC可以用来做什么？

1. 实现自适应两栏布局

原始效果：

根据BFC布局规则第3条：

每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

　　因此，虽然存在浮动的元素aslide，但main的左边依然会与包含块的左边相接触。

　　根据BFC布局规则第4条：

BFC的区域不会与 float box重叠。

　　我们可以通过通过触发main生成BFC， 来实现自适应两栏布局。

 .main {
            overflow:hidden;//使main生成BFC
            height: 200px;
            background: green;
        }

效果：

2.清除内部浮动

原始效果：

根据BFC布局规则第六条：

计算 BFC的高度时，浮动元素也参与计算

　　为达到清除内部浮动,可以触发par生成BFC，那么par在计算高度时，par内部的浮动元素child也会参与计算。

　　代码：

.par {
      border: 5px solid darkgray;
      width: 300px;
      overflow:hidden;
  }

效果：

3.解决外边距的塌陷问题（垂直塌陷）

    
        
        
    


    
1111
    
2222

原始效果（两个部分的margin重叠了）：

根据BFC布局规则第二条：

Box垂直方向的距离由margin决定。属于同一个 BFC的两个相邻 Box的margin会发生重叠

　　我们可以在其中一个p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了。

    
1111
    

        
2222
    

4.利用BFC解决包含塌陷

原本，正确的显示方式，应该是粉色盒子与红色盒子的顶部距离为50px，但是由于margin的塌陷问题，导致盒子内部的布局影响到了外部。这个时候，就可以触发BFC，将父盒子变成一个独立的区域，这样在BFC区域内部的任何操作，都不会影响到外部。
代码：

.father {
       width:300px;
       height:300px;
       background-color: red;
       overflow:hidden;
    }

总结

• 一个BFC区域只包含其子元素，不包括其子元素的子元素.
• 并不是所有的元素都能成为一块BFC区域，只有当这个元素满足条件的时候才会成为一块BFC区域
• 不同的BFC区域之间是相互独立的，互不影响的。利用这个特性我们可以让不同BFC区域之间的布局不产生影响.