BFC 塊格式化上下文
創建BFC的情況（指路）
BFC是盒子元素布局的區域以及浮動元素與其他元素交互的區域，是一個作用范圍；規定區域內的元素的排列方式
BFC形成條件
BFC特性
內部的Box會在垂直方向，一個接一個地放置
Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊
每個元素的margin-box的左邊， 與包含塊border-box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
BFC的區域不會與float box重疊。
BFC能做什么
- 高度塌陷
HTML:
<div class="container">
<div class="left"></div>
</div>
CSS:
.container {
width: 500px;
background-color: #6735;
border:2px solid red;
}
.left {
width: 100px;
height: 200px;
background-color: #343433;
float:left;
}
高度塌陷
原因：標準文檔流中，container元素的高度由子元素left撐開，left元素設置float之后脫離了文檔流，導致container元素高度塌陷
解決方法：BFC具有包含浮動元素的特性，因此父元素設置overflow:hidden 創建BFC即可包含浮動子元素
- margin重疊
垂直方向上的塊元素margin重疊
常見場景就不多說了嘻嘻父子元素的margin重疊
<div class="box"></div>
<div class="wrap">
<h4>xixix</h4>
</div>
.wrap {
width: 200px;
background-color: #dedede;
overflow:hidden
}
.wrap h4 {
background-color: #fefe;
margin-left: 20px;
margin-top:30px;
}
父子元素margin重疊
原因：屬于同一個BFC的兩個相鄰Box的margin會發生重疊
解決方法：wrap元素添加overflow：hidden
其他方法： wrap元素添加border | padding
- 阻止浮動元素覆蓋
<div class="box1"></div>
<div class="box2"> BFC的區域不會與float box重疊。BFC的區域不會與float box重疊。BFC的區域不會與float box重疊。BFC的區域不會與float box重疊。BFC的區域不會與float box重疊。BFC的區域不會與float box重疊。BFC的區域不會與float box重疊</div>
.box1{
height: 100px;
width: 100px;
float: left;
background: #dedede;
}
.box2{
width: 200px;
height: 200px;
background: #dede;
}
字體環繞
原因：box1浮動之后脫離文檔流，與box2重疊且引起文字環繞效果
解決方法：box2增加overflow:hidden創建BFC，防止與float元素重疊
