1.什么是BFC?
是Web頁面中盒模型布局的CSS渲染模式，指一個獨立的渲染區(qū)域或者說是一個隔離的獨立容器,創(chuàng)建了BFC的元素就是一個獨立的盒子仔夺，不過只有Block-level box可以參與創(chuàng)建BFC，它規(guī)定了內部的Block-level Box 如何布局小渊，并且這個獨立盒子里的布局不受外部影響，當然它也不會影響到外面的元素
2.創(chuàng)建BFC
1.浮動元素：float除none以外的值
2.定位元素：position: absolute或fixed
3.display: inline-block|flex|inline-flex|table-cell或table-caption
4.overflow 除了 visible 以外的值hidden历葛，auto价匠，scroll
3.應用場景
- 解決margin疊加的問題
- 用于布局（overflow: hidden）,BFC不會與浮動盒子疊加当纱。
- 用于清除浮動，計算BFC高度踩窖。
4.使用BFC
1.解決margin疊加的問題
<div class="box1"></div>
<div class="box2"></div>
//css
.box1, .box2 {
width: 100px;
height: 100px;
background-color: rgb(157, 49, 49);
}
.box1 {
margin-bottom: 100px;
}
.box2 {
margin-top: 200px;
}
image.png
按道理應為300px,可是它不講道理坡氯，以margin較大的為準，margin重疊了
我們給他講講道理
<div class="box">
<div class="box2"></div>
</div>
讓box2處于一個bfc中
.box {
overflow: hidden; //觸發(fā)bfc
}
image.png
2.清除浮動
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
box1,2,3全都左浮洋腮，box沒有設置高度箫柳，看看實際情況
image.png
box沒有被撐開，因為浮動元素脫離文檔流啥供，不占據空間
我們讓box成為一個bfc
.box {
width: 300px;
border: 5px solid #000;
overflow: hidden; /* 觸發(fā)bfc */
}
image.png
box被撐開了悯恍，有了高度
3.bfc防止文字環(huán)繞
<div class="box">
<div class="img"></div>
<p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>
</div>
image.png
如果不想讓文字環(huán)繞，可以使用bfc
p {
background-color: rgb(70, 119, 73);
color: #fff;
overflow: hidden; /* 觸發(fā)bfc*/
}
image.png
