CSS中BFC是什么（BFC开发中有哪些应用）
BFC(Block formatting context) 块级格式化上下文,它是一个独立的渲染区域，其中的元素不受外界的影响，同样的里面的元素也不会影响外面。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
内部的Box 会在垂直方向，一个接一个的放置；
Box 垂直方向的距离由margin决定；同一个Box中的相邻Box的margin会发生重叠；
每个盒子（块盒与行盒）的左边距从左往右格式化，即使浮动也是如此。
BFC的区域不会与float box重叠。(两栏布局原理)
计算BFC的高度时，浮动元素也参与计算。(清除浮动原理)
float的值不是none；
position 的值不是relative或者relative；
display的值是inline-block、table-cell、flex、或者inline-flex;
overflow的值不是visible;
1. 同一个 BFC 下外边距会发生折叠
<style>
.box1{
height: 200px;
margin:30px;
background: red;
}
.box2{
height: 200px;
margin:30px;
background: yellow;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
从上图可以看出，两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠，两个盒子的距离只有 30px;而不是相加60px;
这就是上面说的，BFC布局的第三条。
如果想避免重叠可以将其放在不同的BFC容器中；
<style>
section{overflow: hidden;}
.box1{
height: 200px;
margin:30px;
background: red;
}
.box2{
height: 200px;
margin:30px;
background: yellow;
}
</style>
<body>
<section>
<div class="box1"></div>
</section>
<section>
<div class="box2"></div>
</section>
</body>这样边距就变成了60px了；
2、BFC可以用来清除浮动（计算BFC的高度时，浮动元素也参与计算）
使用overflow：hidden 清除浮动，是大家常用的功能；其原理就是利用了，出发了盒子的BFC；
我们都知道浮动的元素会脱离文档流
<style>
ul{
border:1px solid #000;
}
li{
width:100px;
height: 100px;
float: left;
background: red;
}
li:nth-child(2n){
background: yellow;
}
</style>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
我们看到ul 容器的高度只剩下了边框；
我们给ul 触发容器的 BFC，那么容器将会包裹着浮动元素;(添加overflow hidden；属性)；
3、BFC 可以阻止元素被浮动元素覆盖
我们来实现一个，左边宽度固定右边自适应的布局；
<style>
.let{width:100px;height:100px;float:left; background: red;}
.right{height:200px; background: yellow;}
</style>
<body>
<div class="let"></div>
<div class="right"></div>
</body>
我们看到右边的元素环绕了左边的元素；如果想避免元素被覆盖，可触发第右边的元素的 BFC 特性，在右边的元素中加入 overflow: hidden，就会变成：
这也是实现，两列自适应布局的常见方法。
Inline Formatting Context 行内格式化上下文
1、IFC的元素，线框高度由其包含行内元素中最高的实际高度计算而来；
2、IFC的inline box一般左右都贴紧整个IFC；
3、IFC中不可能有块级元素，当插入块级元素时（如p中插入div）会产生两个匿名快与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。
原文地址：https://tangjiusheng.cn/divcss/1668.html