1. BFC 是什么？

BFC--块级格式化上下文（Block Formatting Context），是一个独立渲染的块级盒子，其内部的元素与外部的元素相互隔离，内外元素的定位不会相互影响。

2. 应用

2.1 清除浮动

• 浮动元素是脱离文档流的，如下图：

• 对应代码：

html 部分:

    
  
     
          Floated element  
     
  BFC特性：其内部的所有元素都会被其包裹。
    
复制代码

css 部分:

.container-clear-none{    background-color: #f5d3dc;}.floated {    float: left;    background-color: #cadaed;    margin: 10px;    padding: 20px;    border: 1px solid #ccc;    border-radius: 4px;}复制代码

若触发浮动元素的父级容器的BFC，那么容器会包裹浮动元素，起到清除浮动的作用。

• 对应代码：

html 部分:

    
  
     
          Floated element  
     
  BFC特性：其内部的所有元素都会被其包裹。
    
复制代码

css 部分:

.container-clear{    background-color: #f5d3dc;    overflow: hidden; }.floated {    float: left;    background-color: #cadaed;    margin: 10px;    padding: 20px;    border: 1px solid #ccc;    border-radius: 4px;}复制代码

2.2 清除文字环绕

同一容器内，与浮动元素同级的元素会有部分被覆盖，但文字不会，而是会环绕浮动元素。

• 对应代码：

html 部分:

    
  
     
          Floated element  
     
  
     
      BFC特性：包裹浮动元素。包裹浮动元素。包裹浮动元素。包裹浮动元素。包裹浮动元素。包裹浮动元素。包裹浮动元素。包裹浮动元素。包裹浮动元素。
     
 
    
复制代码

css 部分:

.container {    background-color: #f5d3dc;    overflow: hidden;}.floated {    float: left;    background-color: #cadaed;    margin: 10px;    padding: 20px;    border: 1px solid #ccc;    border-radius: 4px;}复制代码

有些情况下不想要第二个元素被覆盖，可触发第二个元素的 BFC ，则第二个元素不会被覆盖，这种方法也可用来实现两列自适应布局。

• 对应代码：

html 部分:

    
  
     
          Floated element  
     
  
     
      BFC特性：包裹浮动元素。包裹浮动元素。包裹浮动元素。包裹浮动元素。包裹浮动元素。包裹浮动元素。包裹浮动元素。包裹浮动元素。包裹浮动元素。
     
    
复制代码

css 部分:

.container {    background-color: #f5d3dc;    overflow: hidden;}.container > .text {    background-color: rgb(183, 245, 242);    overflow: hidden;}.floated {    float: left;    background-color: #cadaed;    margin: 10px;    padding: 20px;    border: 1px solid #ccc;    border-radius: 4px;}复制代码

2.3 清除 margin 叠加

margin 叠加：当两个垂直边界相遇时，它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。

• 对应代码：

html 部分:

    
  
     
      block 1
     
  
     
      block 2
     
  
     
      block 3
     
    
复制代码

css 部分:

.container-margin-none {    background-color: #f5d3dc;    overflow: hidden;}.container-margin-none div {    background-color: lightgreen;    margin: 20px 0;}.floated {    float: left;    background-color: #cadaed;    margin: 10px;    padding: 20px;    border: 1px solid #ccc;    border-radius: 4px;}复制代码

若想清除 margin 叠加，可触发某个元素的BFC，则这个元素会是一个独立的区域，不再产生 margin 叠加。

• 对应代码：

html 部分:

    
  
     
      block 1
     
  
     
      block 2
     
  
     
    
      
       block 3
      
  
     
    
复制代码

css 部分:

.container-margin {    background-color: #f5d3dc;    overflow: hidden;  }.container-margin .block {    margin: 20px 0;    /* height: 20px; */    background-color: lightgreen;}.container-margin .newBFC {    overflow: hidden; }.floated {    float: left;    background-color: #cadaed;    margin: 10px;    padding: 20px;    border: 1px solid #ccc;    border-radius: 4px;}复制代码

3. 常用的 BFC 的触发条件

• 根元素

• ovevflow !== visible

• float 不是 none

• positon: absolute / fixed

• display: inline-block / flow-root / table相关

  参见：