BFC是什么
BFC 全稱為 塊格式化上下文 (Block Formatting Context) ，BFC是一個塊獨立的作用域，決定了元素如何對其內容進行定位，以及與其他元素的關系和相互作用。具有BFC特性的元素可以看做是隔離了的獨立容器，容器里面的元素不會在布局上影響到外面的元素
將元素設置為不同BFC可以讓它們之間保持獨立，以消除它們之間的影響觸發(fā)BFC的條件
滿足下列條件之一就可以觸發(fā)BFC
1：根元素，即html元素
2：float的值不為none
3：overflow的值不為visible
4：display的值為inline-block、table-cell、table-caption
5：position的值為absolute或者fixed-
BFC的作用
可以阻止元素被浮動的元素覆蓋（可做兩欄布局自適應）
綠色盒子浮動遮擋了紅色盒子
觸發(fā)紅色盒子的BFC，可防止被綠色盒子遮擋
<style>
*{
padding:0;
margin :0;
}
.box {
width: 400px;
height: 100px;
margin: 0 auto;
}
.green {
width: 100px;
height: 50px;
float: left;
background-color: green;
}
.red {
width: 200px;
height: 100px;
/* float: left; */
/* display: inline-block; */
/* display: table-cell; */
/* overflow: hidden; */
/* position: absolute; */
/* position: fixed; */
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="green"></div>
<div class="red">BFC</div>
</div>
</body>
把注釋的任意一條打開會觸發(fā).red的BFC，讓兩者處于不同的BFC
-
解決高度塌陷
綠盒子設置浮動前，父盒子被撐開高度：
綠盒子設置浮動后，父盒子高度塌陷：
盒子觸發(fā)BFC可以解決這個問題
<style>
.box {
width: 200px;
border: 1px solid #ccc;
overflow：hidden；
}
.son {
width: 100px;
height: 100px;
background-color: green;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
- 解決同一個BFC區(qū)域的垂直方向margin合并問題
屬于同一個BFC的兩個相鄰的box的margin會重疊，以大的為主。要想解決這個問題，可以將兩個盒子分為不同的BFC中。
在同一個BFC中時：
分為兩個不同的BFC之后：
<style>
.green {
width: 200px;
height: 100px;
margin-bottom: 20px;
background-color: green;
}
.red {
width: 200px;
height: 100px;
margin-top: 30px;
background-color: red;
}
.box {
overflow: hidden;
}
.main {
width: 300px;
height: 250px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="main">
<div class="green"></div>
<div class="box">
<div class="red">BFC</div>
</div>
</div>
</body>
