BFC 即为Block formatting context 的缩写，BFC 主要用来将一个盒子设置为一个隔离的容器，不管盒子内部的元素具有什么属性，都不会影响到盒子的外面。
1、哪些元素能产生BFC不是所有的元素都能产生BFC的，只有display 属性为 block, list-item, table 的元素，才可以产生BFC。
这点其实根据BFC的主要作用应该可以很形象的理解。“必须表现为一块一块的，才能给出一个隔离的空间“。
2、触发BFC的具体条件光有BFC的潜质，不代表就直接会触发BFC。触发BFC 需要至少满足下列条件中的一条：
（1）、具有浮动（即float不为none） （2）、具有绝对定位或固定定位（position：absolute |fixed） （3）、display为inline-block, table-cell, table-caption, flex, inline-flex （4）、overflow不为visible（一般设置overflow：hidden） 3、BFC盒子的特性 （1）、BFC内部的盒子是从上到下一个接着一个排列的（正常的块级元素排列也是如此） （2）、BFC内部的盒子之间的距离是通过margin值来设置的，相邻的两个盒子的margin会重叠 （3）、BFC盒子内部的子盒子是紧贴着BFC盒子的边缘的（从左到右排列，则子盒子的左边缘紧贴着BFC的左边框（不与边框重叠）；从右到左排列，则子盒子的右边缘紧贴着BFC盒子的右边框） （4）、BFC盒子不会与浮动的盒子产生重叠，而是紧靠着浮动的边缘 （5）、计算BFC的高度时，也会自动计算浮动或定位的盒子的高度 4、BFC的具体应用 （1）、清除元素内部的浮动（特点（5）的应用）正常情况下当父盒子不给出高度时，子盒子的高度会将把父盒子自动撑开来，让父盒子具有高度。
而如果子元素都具有浮动时，父盒子就不会被撑开。这时使父盒子具有BFC属性即可同时计算浮动盒子的高度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .fa { width: 200px; margin: 100px auto; border: 2px solid red; background-color: aqua; } .fa div { width: 100px; height: 100px; float: left; border: 2px solid yellowgreen; background-color: deeppink; } .fa .son2 { border: 2px solid grey; background-color: hotpink; } </style> </head> <body> <div class="fa"> <div class="son1"></div> <div class="son2"></div> </div> </body> </html>