【前端工程师手册】BFC笔记

什么是BFC

首先呢，BFC的全称是Block Formatting Context，BFC其实就是页面上的一块区域，有它自己的渲染规则，决定了其内部子元素的定位等等。而且BFC内部的box的布局，与这个容器外的毫不相关。

BFC有哪些特性

1. 在同一个BFC元素中，其子元素按照文档流一个接一个的排列，而且垂直相邻的两个块级元素在上下边距可能会发生外边距（margin）合并，为什么说是可能呢，因为即使在同一个BFC中发生了外边距合并也有其他的解决办法（MDN-外边距合并）
2. 创建了BFC的元素不会与浮动元素重叠，并且会出现在浮动元素所在行的剩余空间（如果放的下的话）
3. 创建了BFC的元素计算高度时会算上浮动元素，也就是说在创建了BFC的元素内部，浮动元素不会造成父元素塌陷

BFC如何创建

1. 根元素。我自己测试的是元素会自己创建一个BFC
2. 浮动元素，即float取值不是none的元素
3. overflow不是visible的元素，这个经常用来清除浮动
4. display为tabel-cell、table-caption或inline-block

BFC有哪些用途

1. 防止被浮动元素遮盖，比如实现两栏布局

      .aside {
        background: red;
        width: 170px;
        height: 600px;
        float: left;
      }
      .main {
        background: green;
        height: 700px;
      }
      
   
      
   
      

   

2. 解决上下相邻的两个块级外边距合并（创建了BFC的元素和它的子元素不会发生折叠）

      .up {
        height: 100px;
        background: red;
        margin-bottom: 20px;
      }
      .down {
        height: 100px;
        background: green;
        margin-top: 10px;
      }
      
   
      
   

   本来上下两个元素间距应该是30px但是现在却是20px，现在分别把这两个元素放入不同的BFC

      
   
          
   
      
      
   
          
   
      
      .wrapper {
        overflow: hidden;
      }

   

3. 清除浮动
   浮动元素会带来父元素高度塌陷

      
   
          
   
      
      .out {
        border: 1px solid;
        padding: 10px;
        /* overflow: hidden; */
      }
      .in {
        width: 100px;
        height: 100px;
        background: red;
        float: left;
      }

   

参考资料：
BFC-博客园
BFC-MDN
深入理解BFC和Margin Collapse