BFC 塊格式化上下文
創(chuàng)建BFC的情況（指路）
BFC是盒子元素布局的區(qū)域以及浮動(dòng)元素與其他元素交互的區(qū)域，是一個(gè)作用范圍；規(guī)定區(qū)域內(nèi)的元素的排列方式
BFC特性
內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置
Box垂直方向的距離由margin決定骂维。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊
每個(gè)元素的margin-box的左邊磕诊， 與包含塊border-box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)肠仪。即使存在浮動(dòng)也是如此。
BFC的區(qū)域不會(huì)與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;
}
原因：標(biāo)準(zhǔn)文檔流中异旧，container元素的高度由子元素left撐開，left元素設(shè)置float之后脫離了文檔流提佣，導(dǎo)致container元素高度塌陷
解決方法：BFC具有包含浮動(dòng)元素的特性吮蛹，因此父元素設(shè)置overflow:hidden 創(chuàng)建BFC即可包含浮動(dòng)子元素
- margin重疊
垂直方向上的塊元素margin重疊
常見場(chǎng)景就不多說了嘻嘻父子元素的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;
}
原因：屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊
解決方法：wrap元素添加overflow：hidden
其他方法： wrap元素添加border | padding
- 阻止浮動(dòng)元素覆蓋
<div class="box1"></div>
<div class="box2"> BFC的區(qū)域不會(huì)與float box重疊。BFC的區(qū)域不會(huì)與float box重疊拌屏。BFC的區(qū)域不會(huì)與float box重疊潮针。BFC的區(qū)域不會(huì)與float box重疊。BFC的區(qū)域不會(huì)與float box重疊倚喂。BFC的區(qū)域不會(huì)與float box重疊每篷。BFC的區(qū)域不會(huì)與float box重疊</div>
.box1{
height: 100px;
width: 100px;
float: left;
background: #dedede;
}
.box2{
width: 200px;
height: 200px;
background: #dede;
}
原因：box1浮動(dòng)之后脫離文檔流，與box2重疊且引起文字環(huán)繞效果
解決方法：box2增加overflow:hidden創(chuàng)建BFC端圈，防止與float元素重疊
