什么是BFC
BFC（ Block formatting context ): 塊級格式化上下文，具有 BFC 特性的元素可以看作是隔離的獨立容器，容器里面的元素不會在布局上影響到外面的元素，并且 BFC 具有普通容器所沒有的一些特性。
BFC的特性
- 屬于同一個BFC的兩個相鄰容器的上下margin會重疊
- 計算BFC高度時浮動元素也參與計算
- BFC的區(qū)域不會與浮動元素發(fā)生重疊
- BFC內的容器在垂直方向依次排列
- 元素的margin-left與其包含塊的border-left相接觸
- BFC是獨立容器，容器內部元素不會影響容器外部元素
如何創(chuàng)建 BFC
- 浮動元素，float值不為none
- 絕對定位元素，position值為absolute、fixed
- display值不為默認，
- overflow值不為visible，為 auto、scroll、hidden
BFC 使用場景
- 解決邊距重疊問題
<div class="box1"></div>
<div class="box2"></div>
<style>
.box1 {
width: 100px;
height: 100px;
margin: 10px 0;
}
.box2 {
width: 100px;
height: 100px;
margin: 20px 0;
}
</style>
上面box1和box2之間間距為20px
垂直方向的兩個相鄰元素的外邊距會發(fā)生疊加，疊加后的外邊距為兩者中外邊距的最大值
可以利用BFC,使box1和box2的外邊距都保存
<div class="box1"></div>
<div class="wrap">
<div class="box2"></div>
</div>
<style>
.wrap {
overflow: hidden;
}
</style>
此時box1和box2之間間距為30px
- 清除浮動 overflow:hidden;
<div class="parent">
<div class="text">內容區(qū)</div>
<div class="child">浮動元素</div>
</div>
.parent {
border: solid 1px red;
}
.child {
float: left;
width: 100px;
height: 100px;
background: red;
}
浮動元素.png
浮動元素不占文檔流，無法撐開父元素高度
可以利用BFC,清除浮動帶來的影響
.parent {
border: solid 1px red;
overflow: hidden;
}
