BFC BFC全程为块格式化上下文（Block Formatting Context），在MDN中定义如下：
块格式化上下文（Block Formatting Context，BFC）是网页视觉CSS呈现的一部分，是进行区块盒布局处理的区域，也是浮动要素与其他要素交互的区域。
简单来说，BFC是一个完全独立的箱子，无论内部元素是什么风格，都不会影响箱子外部的布局。
2 .触发bfc根元素的html浮动元素(float不是none )固定位置、绝对位置元素(position是absolute或fixed )行内块元素) display : 利用display: flex )网格元素(display: grid )3.BFC解决问题1 )外部尺寸塌陷包含以下代码： 两个箱子、外形尺寸margin均设定为50px，两个箱子的间距应该为100px，但实际间距为50px。
这是因为产生外边距塌陷问题，两个箱子的margin重叠，相互影响。
style .son { width: 100px； height: 100px； 背景色：蓝色； margin: 50px； }/stylebodydivclass=' son '/divdivclass=' son '/div/body
利用BFC特性可以解决外距离塌陷问题。 将这两个箱子分别放入两个BFC区。 因为BFC是完全独立的箱子，所以内部元素不会影响外部区域。
将上述代码修改如下即可解决。 两个外壳的间隔为100px。
style.father { background-color : yellow； /*触发器bfc */overflow :隐藏； } .son { width: 100px； height: 100px； 背景色：蓝色； margin: 50px； }/stylebodydivclass=' father ' divclass=' son '/div/divdivclass=' father ' divclass=' son '/div/div/body
2 .内部边距中包含以下代码，在父子关系的箱子中，如果在子箱子中加上margin-top，则父箱子也会变得一起。
style .top { height: 50px； width: 200px； 背景色： pink； } .father { width: 200px； 高： 200 px； 背景色： yellow； } .son { width: 100px； height: 100px； 背景色：蓝色； margin-top: 50px； }/stylebody div class='top '顶级元素/divdivclass=' father ' divclass=' son '/div/div/body
利用BFC特性可以解决包括塌陷在内的问题。 将父箱子设置为BFC，以防止父箱子内部的样式影响外部布局。
使用overflow :隐藏触发BFC :
style .top { height: 50px； width: 200px； 背景色： pink； } .father { width: 200px； 高： 200 px； 背景色： yellow； /*触发器b
FC */ overflow: hidden; } .son { width: 100px; height: 100px; background-color: blue; margin-top: 50px; }</style><body> <div class="top">顶部元素</div> <div class="father"> <div class="son"></div> </div></body> 3. 清除浮动带来的影响如下代码，一个没有设置高度的父盒子，里面一个子盒子设置了浮动，那么父盒子失去了高度，不显示在页面上了。
<style> .top { height: 50px; width: 200px; background-color: pink; } .father { width: 200px; background-color: yellow; } .son { width: 100px; height: 100px; background-color: blue; float: left; }</style><body> <div class="top">顶部元素</div> <div class="father"> <div class="son"></div> </div></body>可以利用 BFC 特性来解决浮动问题。因为父盒子没有高度了，必然影响了外部元素的布局。那将父盒子触发 BFC，这样父盒子内部的子盒子就不会影响到外部布局了：
<style> .top { height: 50px; width: 200px; background-color: pink; } .father { width: 200px; background-color: yellow; /* 触发BFC */ overflow: hidden; } .son { width: 100px; height: 100px; background-color: blue; float: left; }</style><body> <div class="top">顶部元素</div> <div class="father"> <div class="son"></div> </div></body> 4. 阻止浮动元素覆盖标准流如下代码，两个为兄弟关系的盒子，其中一个盒子设置浮动时，另一个还是标准流，那么浮动的盒子会覆盖标准流的盒子，显示出如下效果：
<style> .div1 { width: 100px; height: 100px; background-color: blue; float: left; } .div2 { height: 300px; background-color: yellow; font-size: 26px; }</style><body> <div class="div1"></div> <div class="div2"> 我被挤开了。我被挤开了。我被挤开了。我被挤开了。我被挤开了。我被挤开了。我被挤开了。我被挤开了。我被挤开了。我被挤开了。我被挤开了。我被挤开了。 </div></body>可以看到，标准流的盒子（黄色的盒子）中的文字受到了浮动流盒子（蓝色盒子）的影响，文字环绕蓝色盒子周围。
可以利用 BFC 特性来解决这个问题。标准流盒子触发 BFC，浮动元素就不会覆盖标准流盒子了，也不会影响到里面的文字：
<style> .div1 { width: 100px; height: 100px; background-color: blue; float: left; } .div2 { height: 300px; background-color: yellow; font-size: 26px; /* 触发BFC */ overflow: hidden; }</style><body> <div class="div1"></div> <div class="div2"> 我被挤开了。我被挤开了。我被挤开了。我被挤开了。我被挤开了。我被挤开了。我被挤开了。我被挤开了。我被挤开了。我被挤开了。我被挤开了。我被挤开了。 </div></body>而且，还实现了黄色盒子的宽度自适应效果，根据蓝色盒子的宽度，自动调整宽度。