浅谈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>
效果如下
