BFC 即块级格式上下文（Block Formatting Context），它是指一个独立的块级渲染区域，只有block-level的box参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
CSS2.1规定满足一下条件之一就会生成BFC：
上面说了，生成BFC的区域会有一套渲染规则来约束块级盒子内的布局；这些约束规则如下：
说了一通BFC的触发条件和布局规则，初次接触的可能很不容易理解；下面用这些BFC布局规则来举例几个常见的css规则和技巧就很容易明白了~
<head>
<style>
.bro1{
width:300px;
height:200px;
background:#ddd;
margin-bottom:30px;
}
.bro2{
width:200px;
height:100px;
background:pink;
margin-top:20px;
}
</style>
</head>
<body>
<div class=‘bro1‘></div>
<div class=‘bro2‘> </div>
</body>
依据第三点规则：位于同一BFC内的块级元素会发生外边距合并；那么，要解决这个问题，让原先这两个相邻的两个元素不在同一BFC内就可以了。 为其中一个块创建新的BFC：
<head>
<style>
.bro1{
width:300px;
height:200px;
background:#ddd;
margin-bottom:30px;
}
.bro2{
width:200px;
height:100px;
background:pink;
margin-top:20px;
}
.special{
overflow:auto;
}
</style>
</head>
<body>
<div class=‘special‘>
<div class=‘bro1‘></div>
</div>
<div class=‘bro2‘> </div>
</body>效果：
这个规则还可以作为多栏布局的一种实现方式。
<body>
<div id="main">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
</body>左右两栏宽度固定，中间栏可以根据浏览器宽度自适应:
原文：https://www.cnblogs.com/geek1116/p/10165054.html