1. BFC 是什么？
BFC--块级格式化上下文（Block Formatting Context），是一个独立渲染的块级盒子，其内部的元素与外部的元素相互隔离，内外元素的定位不会相互影响。
1.1 BFC 布局规则
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此;
- 内部的Box会在垂直方向，一个接一个地放置；
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠，距离为margin相对较大的一个；
- BFC的区域不会与float box重叠。
1.2 常用的 BFC 的触发条件
- 根元素（<html>）
- ovevflow !== visible
- float 不是 none
- positon: absolute / fixed
- display: inline-block / flow-root / table相关
2. 应用
2.1 清除浮动
-
浮动元素是脱离文档流的，如下图：
image - 对应代码：
html 部分:
<div class="container-clear-none">
<div class="floated">
Floated element
</div>
BFC特性：其内部的所有元素都会被其包裹。
</div>
css 部分:
.container-clear-none{
background-color: #f5d3dc;
}
.floated {
float: left;
background-color: #cadaed;
margin: 10px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 4px;
}
若触发浮动元素的父级容器的BFC，那么容器会包裹浮动元素，起到清除浮动的作用。
image
- 对应代码：
html 部分:
<div class="container-clear">
<div class="floated">
Floated element
</div>
BFC特性：其内部的所有元素都会被其包裹。
</div>
css 部分:
.container-clear{
background-color: #f5d3dc;
overflow: hidden;
}
.floated {
float: left;
background-color: #cadaed;
margin: 10px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 4px;
}
2.2 清除文字环绕
同一容器内，与浮动元素同级的元素会有部分被覆盖，但文字不会，而是会环绕浮动元素。
image
- 对应代码：
html 部分:
<div class="container">
<div class="floated">
Floated element
</div>
<div>BFC特性：包裹浮动元素。包裹浮动元素。包裹浮动元素。包裹浮动元素。包裹浮动元素。包裹浮动元素。包裹浮动元素。包裹浮动元素。包裹浮动元素。</div>
</div>
css 部分:
.container {
background-color: #f5d3dc;
}
.floated {
float: left;
background-color: #cadaed;
margin: 10px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 4px;
}
有些情况下不想要第二个元素被覆盖，可触发第二个元素的 BFC ，则第二个元素不会被覆盖，这种方法也可用来实现两列自适应布局。
image
- 对应代码：
html 部分:
<div class="container">
<div class="floated">
Floated element
</div>
<div class="text">BFC特性：包裹浮动元素。包裹浮动元素。包裹浮动元素。包裹浮动元素。包裹浮动元素。包裹浮动元素。包裹浮动元素。包裹浮动元素。包裹浮动元素。</div>
</div>
css 部分:
.container {
background-color: #f5d3dc;
}
.container .text {
overflow: hidden;
background-color: rgb(183, 245, 242);
}
.floated {
float: left;
background-color: #cadaed;
margin: 10px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 4px;
}
2.3 清除 margin 叠加
margin 叠加：当两个垂直边界相遇时，它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。
image
- 对应代码：
html 部分:
<div class="container-margin-none">
<div class="block">block 1</div>
<div class="block">block 2</div>
<div class="block">block 3</div>
</div>
css 部分:
.container-margin-none {
background-color: #f5d3dc;
overflow: hidden;
}
.container-margin-none .block {
background-color: lightgreen;
margin: 20px 0;
}
若想清除 margin 叠加，可触发某个元素的BFC，则这个元素会是一个独立的区域，不再产生 margin 叠加。
image
- 对应代码：
html 部分:
<div class="container-margin">
<div class="block">block 1</div>
<div class="block">block 2</div>
<div class="newBFC">
<div class="block">block 3</div>
</div>
</div>
css 部分:
.container-margin {
background-color: #f5d3dc;
overflow: hidden;
}
.container-margin .block {
background-color: lightgreen;
margin: 20px 0;
}
.container-margin .newBFC {
overflow: hidden;
}
参见：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context
