1. BFC 是什么？
BFC--塊級(jí)格式化上下文（Block Formatting Context），是一個(gè)獨(dú)立渲染的塊級(jí)盒子，其內(nèi)部的元素與外部的元素相互隔離，內(nèi)外元素的定位不會(huì)相互影響。
1.1 BFC 布局規(guī)則
- BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此;
- 內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置；
- Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊，距離為margin相對(duì)較大的一個(gè)；
- BFC的區(qū)域不會(huì)與float box重疊。
1.2 常用的 BFC 的觸發(fā)條件
- 根元素（<html>）
- ovevflow !== visible
- float 不是 none
- positon: absolute / fixed
- display: inline-block / flow-root / table相關(guān)
2. 應(yīng)用
2.1 清除浮動(dòng)
-
浮動(dòng)元素是脫離文檔流的，如下圖：
image - 對(duì)應(yīng)代碼：
html 部分:
<div class="container-clear-none">
<div class="floated">
Floated element
</div>
BFC特性：其內(nèi)部的所有元素都會(huì)被其包裹。
</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;
}
若觸發(fā)浮動(dòng)元素的父級(jí)容器的BFC，那么容器會(huì)包裹浮動(dòng)元素，起到清除浮動(dòng)的作用。
image
- 對(duì)應(yīng)代碼：
html 部分:
<div class="container-clear">
<div class="floated">
Floated element
</div>
BFC特性：其內(nèi)部的所有元素都會(huì)被其包裹。
</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 清除文字環(huán)繞
同一容器內(nèi)，與浮動(dòng)元素同級(jí)的元素會(huì)有部分被覆蓋，但文字不會(huì)，而是會(huì)環(huán)繞浮動(dòng)元素。
image
- 對(duì)應(yīng)代碼：
html 部分:
<div class="container">
<div class="floated">
Floated element
</div>
<div>BFC特性：包裹浮動(dòng)元素。包裹浮動(dòng)元素。包裹浮動(dòng)元素。包裹浮動(dòng)元素。包裹浮動(dòng)元素。包裹浮動(dòng)元素。包裹浮動(dòng)元素。包裹浮動(dòng)元素。包裹浮動(dòng)元素。</div>
</div>
css 部分:
.container {
background-color: #f5d3dc;
}
.floated {
float: left;
background-color: #cadaed;
margin: 10px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 4px;
}
有些情況下不想要第二個(gè)元素被覆蓋，可觸發(fā)第二個(gè)元素的 BFC ，則第二個(gè)元素不會(huì)被覆蓋，這種方法也可用來實(shí)現(xiàn)兩列自適應(yīng)布局。
image
- 對(duì)應(yīng)代碼：
html 部分:
<div class="container">
<div class="floated">
Floated element
</div>
<div class="text">BFC特性：包裹浮動(dòng)元素。包裹浮動(dòng)元素。包裹浮動(dòng)元素。包裹浮動(dòng)元素。包裹浮動(dòng)元素。包裹浮動(dòng)元素。包裹浮動(dòng)元素。包裹浮動(dòng)元素。包裹浮動(dòng)元素。</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 疊加：當(dāng)兩個(gè)垂直邊界相遇時(shí)，它們將形成一個(gè)邊界。這個(gè)邊界的高度等于兩個(gè)發(fā)生疊加的邊界的高度中的較大者。
image
- 對(duì)應(yīng)代碼：
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 疊加，可觸發(fā)某個(gè)元素的BFC，則這個(gè)元素會(huì)是一個(gè)獨(dú)立的區(qū)域，不再產(chǎn)生 margin 疊加。
image
- 對(duì)應(yīng)代碼：
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
