淺談BFC塊級格式上下文
BFC
BFC全稱爲（Block Formatting Context），中文爲塊級格式上下文。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何佈局，並且與這個區域外部毫不相干。
其中FC（Formatting context）是W3C CSS2.1規範中的一個概念。它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係、相互作用。最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context(簡稱IFC)。
CSS2.1 中只有BFC和IFC, CSS3中還增加了GFC和FFC。
-
BFC佈局規則
1.內部的盒子會在垂直方向，一個個地放置
2.垂直方向距離由margin決定
3.每個元素的左邊與包含該元素的左邊相接觸
4.BFC區域不會與float重疊
5. BFC是隔離的獨立容器
6. 在計算BFC高度時，浮動元素也參與在內 -
觸發BFC佈局
1.body根元素
2.浮動元素：float除none之外的值
3.絕對定位：position(absolute,fixed)
4.display: 爲inline-block，table-cells，flex
5.overflow除visible以外的值(hidden,auto,scroll) -
BFC的三大應用
1.margin重疊問題
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1,.box2{
width: 20px;
height: 20px;
margin: 20px;
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
在不觸發BFC的情況下，本來會發生margin外邊距的重疊，效果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1,.box2{
width: 20px;
height: 20px;
margin: 20px;
background-color: rebeccapurple;
}
.box3{
overflow: hidden;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
通過給其中一個div添加父元素，且設置overflow：hidden來觸發BFC，從而 解決margin重疊問題。
2.清除浮動
浮動元素會導致父元素高度崩塌，我們可以使用BFC包容，給父元素設 置overflow:hidden來觸動BFC，從而清除浮動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box4{
border: 1px solid black;
}
.box4 div{
width: 40px;
margin: 5px;
height: 40px;
background-color: red;
float: left;
}
</style>
</head>
<body>
<div class="box4">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box4{
border: 1px solid black;
overflow: hidden;
}
.box4 div{
width: 40px;
margin: 5px;
height: 40px;
background-color: red;
float: left;
}
</style>
</head>
<body>
<div class="box4">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
通過給父元素設置overflow:hidden觸發BFC，清除浮動
3.阻止元素被浮動元素覆蓋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box5{
width: 50px;
height: 50px;
float: left;
background-color: rgb(147, 184, 216);
}
.box6{
width: 100px;
height: 100px;
background-color: bisque;
}
</style>
</head>
<body>
<div class="box5"></div>
<div class="box6"></div>
</body>
</html>
浮動元素覆蓋了第二個元素，要想阻止覆蓋，則該元素觸發BFC
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box5{
width: 50px;
height: 50px;
float: left;
background-color: rgb(147, 184, 216);
}
.box6{
width: 100px;
height: 100px;
background-color: bisque;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box5"></div>
<div class="box6"></div>
</body>
</html>
效果如下
