1、是什么
Block Formatting Contexts (BFC，块级格式化上下文)，就是 一个块级元素 的渲染显示规则。通俗一点讲，可以把 BFC 理解为一个封闭的大箱子，容器里面的子元素不会影响到外面的元素，反之也如此。
2、布局规则
- 内部的盒子会在垂直方向，一个个地放置；
- BFC是页面上的一个隔离的独立容器；
- 属于同一个BFC的 两个相邻Box的 上下margin会发生重叠 ；
- 计算BFC的高度时，浮动元素也参与计算
- 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
- BFC的区域不会与float重叠；
3、如何触发BFC
- body 根元素；
- 浮动元素：float 不为none的属性值；
- 绝对定位元素：position (absolute、fixed)
- display为： inline-block、table-cells、flex
- overflow 除了visible以外的值 (hidden、auto、scroll)
4、应用
（1）两个 相邻的普通流中的 块元素垂直方向上的 margin会折叠(解决margin叠加问题)
<head>
.p {
width:200px;
height:50px;
margin:50px 0;
background-color:red;
}
</head>
<body>
<div class="p"></div>
<div class="p"></div>
</body>效果图：
原因：上文的例子 之所以发生外边距折叠，是因为他们 同属于 body这个根元素， 所以我们需要让 它们 不属于同一个BFC，就能避免外边距折叠：
解决原理：盒子垂直方向的距离由margin决定， 属于 同一个BFC的 + 两个相邻Box的 + 上下margin 会发生重叠。
解决方案：让 它们 不属于同一个BFC
<div class="p"></div>
<div class="wrap">
<div class="p"></div>
</div> .wrap {
overflow:hidden;
.p {
width:200px;
height:50px;
margin:50px 0;
background-color:red; 
（2）BFC可以包含浮动的元素（清除浮动）
正常情况下，浮动的元素会脱离普通文档流，所以下面的代码里：
<div style="border: 1px solid #000;">
<div style="width: 50px; height: 50px; background: #eee;
float: left;">
</div>
</div>
外层的div会无法包含 内部浮动的div，效果见下图：
原因：正常情况下，浮动的元素会脱离普通文档流
解决原理：但如果我们 触发外部容器的BFC，根据BFC规范中的第4条：计算BFC的高度时，浮动元素也参与计算，那么外部div容器就可以包裹着浮动元素，所以只要把代码修改如下：
解决方案：父级创建BFC
(3) BFC可以阻止元素被浮动元素覆盖(两列的自适应布局)
<div class="aside"></div>
<div class="main"></div>
div {
width:300px;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: black;
}
.main {
height:200px;
background-color:red;
} 
原因：因为上文的 规则5： 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
所以要想改变效果，使其互补干扰，就得利用规则6 ：BFC的区域不会与float重叠，让 <div class="main"> 也能触发BFC的性质
解决原理：利用规则6 ：BFC的区域不会与float重叠
通过这种方法，就能 用来实现 两列的自适应布局。
.main {
overflow:hidden;
height:200px;
background-color:red;
} 
扫一扫
85
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
