块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分。每个块级元素生成一个主块级盒，包含后代盒以及生成的内容。
创建方式
- 根元素（html）
- 浮动
- 绝对定位（absolute 或 fixed）
- 行内块元素（
inline-block） - 表格单元格（
table-cell，HTML表格单元格默认为该值） - 表格标题（
table-caption，HTML表格标题默认为该值） - overflow值不为
visible的块元素 - display值为flow-root的元素
特征表现
- 外边距折叠只会发生在属于同一BFC的块级元素之间。
- 浮动不会影响其它BFC中元素的布局。
- 清除浮动只能清除同一BFC中在它前面的元素的浮动。
- BFC会包裹其中所有元素，包括浮动元素等
实际应用
- 让浮动内容与周围内容等高（清除浮动）
浮动
<div class="box">
<div class="fl">i am a floated box</div>
<p>i am content inside the container</p>
</div>
.box {
background-color: rgb(224, 206, 247);
border: 5px solid rebeccapurple;
}
.fl {
float: left;
width: 200px;
height: 100px;
background-color: white;
border: 1px solid black;
padding: 10px;
}
由于浮动脱离了文档流导致<div> 的 background 和 border 仅仅包含了内容，不包含整个浮动。
创建一个会包含这个浮动的BFC就可以清除子元素浮动，通常的做法是设置父元素 overflow: auto 或者设置其他的非默认的 overflow: visible 的值。
.box {
background-color: rgb(224, 206, 247);
border: 5px solid rebeccapurple;
overflow: hidden;
}
-
避免外边距塌陷
外边距塌陷
.blue,
.red-inner {
height: 50px;
margin: 10px 0;
}
.blue {
background: blue;
}
.red-inner{
background: red;
}
<div class="blue"></div>
<div class="red-inner">red inner</div>
根据BFC特性可以知道，可以再创建一个BFC，让blue和red不在同一个BFC中即可避免。
BFC避免
.blue,
.red-inner {
height: 50px;
margin: 10px 0;
}
.blue {
background: blue;
}
.red-inner{
background: red;
}
.red-outer {
overflow: hidden;
}
<div class="blue"></div>
<div class="red-outer">
<div class="red-inner">red inner</div>
</div>
- 左侧固定，右侧自适应两栏布局
.aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.text {
height: 200px;
background: #fcc;
}
.main {
overflow: auto;
}
<div class="wrap">
<div class="aside"></div>
<div class="main">
<div class="text"></div>
</div>
</div>
image.png
这里就利用了不和浮动元素重叠的特性。
