BFC的概念
Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
那么 BFC 是什么呢？
BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
- BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定的规则进行物品摆放，并且不会影响其他环境中的物品。
- 如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。
- 如果浮动元素会创建BFC，则浮动元素内部的子元素都受到该浮动元素的影响，所以浮动元素之间是互不影响的。
BFC的特性
- BFC是一个独立的容器，容器内子元素不会影响容器外的元素，反之亦是如此。
- 盒子从顶端开始垂直的一个一个的排列，盒子之间垂直的间距是由margin决定的。
- 在同一个BFC中，两个相邻的块级盒子的垂直外边距会发生重叠。
- BFC区域不会和float box发生重叠。
- BFC能够识别并包含浮动元素，当计算其区域的高度时，浮动元素也可以参与计算了。
- 计算BFC的高度时，浮动元素也参与计算。
触发BFC
只要元素满足以下任意一种条件就可以触发BFC特性：
- body根元素
- 浮动元素：float除none以外的值
- 绝对定位元素：position（absolute、fixed）
- display为inline-block、table-cells、flex、inline-flex、table-caption
- overflow除了visible以外的值（hidden、auto、scroll）
BFC的应用
防止margin重叠（塌陷）
相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的垂直边距相遇时， 它们将形成一个外边距。这个外边距的高度等于两个发生折叠的外边距的高度中的较大者。
外边距折叠的条件是 margin 必须相邻!
<style type="text/css">
.box{
color: brown;
background: rgb(226, 159, 108);
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
margin: 100px;
}
</style>
<body>
<div class="box">上面</div>
<div class="box">下面</div>
</body>
image.png
两个box之间的距离为100px，发生了margin重叠（塌陷），解决这个问题，只需要把其中一个box变为BFC元素即可
<style type="text/css">
.box {
color: brown;
background: rgb(226, 159, 108);
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
margin: 100px;
}
</style>
<body>
<div class="box">上面</div>
<div style="overflow: hidden;">
<div class="box">下面</div>
</div>
</body>
image.png
清除内部浮动
- 浮动元素会脱离文档流(绝对定位元素也会脱离文档流)，导致无法计算准确的高度，这种问题称为高度塌陷。
- 解决高度塌陷问题的前提是能够识别并包含浮动元素，也就是清除浮动。
<style type="text/css">
.parent {
width: 300px;
border: 2px solid rgb(120, 201, 177);
}
.box {
color: brown;
background: rgb(226, 159, 108);
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
float: left;
}
</style>
<body>
<div class="parent">
<div class="box">上面</div>
<div class="box">下面</div>
</div>
</body>
image.png
如上左图所示，容器（parent）没有高度或者 height = auto ,并且其子元素（box）是浮动元素，所以该容器的高度是不会被撑开的，即高度塌陷。
解决方法：在容器（container）中创建 BFC。
<style type="text/css">
.parent {
width: 300px;
border: 2px solid rgb(120, 201, 177);
overflow: hidden;
}
.box {
color: brown;
background: rgb(226, 159, 108);
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
float: left;
}
</style>
<body>
<div class="parent">
<div class="box">上面</div>
<div class="box">下面</div>
</div>
</body>
image.png
自适应多栏布局
<style type="text/css">
body{
width: 300px;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: rgb(47, 187, 145);
}
.main {
height: 200px;
background: rgb(171, 75, 156);
}
</style>
<body>
<div class="aside">aside</div>
<div class="main">main</div>
</body>
image.png
这时候main元素有部分被浮动元素所覆盖，(但是文本信息不会被浮动元素所覆盖) 如果想避免元素被覆盖，可以通过触发main生成BFC，以此适应两栏布局
<style type="text/css">
body{
width: 300px;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: rgb(47, 187, 145);
}
.main {
height: 200px;
overflow: hidden;
background: rgb(171, 75, 156);
}
</style>
<body>
<div class="aside">aside</div>
<div class="main">main</div>
</body>
image.png
网友评论