????block formatting context塊級(jí)格式化上下文
????bfc是一個(gè)獨(dú)立的渲染區(qū)域聘裁，只有block-level box參與眠蚂，它規(guī)定了內(nèi)部的block-level box如何布局肛冶，并且與這個(gè)區(qū)域外部毫不相干嫩絮。
????BFC就是頁面上的一個(gè)隔離的獨(dú)立容器迷雪，容器里面的子元素不會(huì)影響到外面的元素碘勉，反之也如此，包括浮動(dòng)和外邊距合并等等奇瘦，有了這個(gè)特性我們布局的時(shí)候就不會(huì)出現(xiàn)意外情況了棘催。

哪些元素會(huì)產(chǎn)生bfc

display屬性為block、list-item耳标、table的元素醇坝，會(huì)產(chǎn)生bfc。（最常用的就是塊級(jí)元素）

什么情況下會(huì)觸發(fā)bfc

1． 設(shè)置了float屬性次坡，并且不為none
2． position屬性為absolute或fixed
3． display為inline-block呼猪、table-cell、table-caption砸琅、flex宋距、inline-flex
4． overflow屬性不為visible

bfc元素所具有的特性

1． 在bfc中，盒子從頂端開始垂直地一個(gè)接一個(gè)的排列症脂；
2． 盒子垂直方向的距離由margin決定谚赎，屬于同一個(gè)bfc的盒子的margin會(huì)重疊；
3． 在bfc中诱篷，每一個(gè)盒子的左邊緣會(huì)觸碰到父容器的左邊緣內(nèi)部壶唤，也就是說在沒有margin和padding時(shí)，父border的內(nèi)邊和子border的外邊重疊棕所；
4． bfc的區(qū)域不會(huì)與浮動(dòng)盒子產(chǎn)生交集闸盔，而是緊貼浮動(dòng)邊緣；
5． 如果父盒子沒有設(shè)置高度琳省，但子盒子中有浮動(dòng)元素蕾殴，那么在計(jì)算bfc的高度時(shí)， 會(huì)計(jì)算上浮動(dòng)盒子的高度岛啸。

bfc的主要用途

清除元素內(nèi)部浮動(dòng)

????只要把父元素設(shè)置為bfc就可以清除子元素的浮動(dòng)，最常見的就是給父元素添加overflow：hidden屬性茴肥。
????啥意思呢坚踩，其實(shí)我有一段時(shí)間不是很明白“清除子元素浮動(dòng)”這句話，人家設(shè)置的好好的浮動(dòng)瓤狐，你干嘛給人家清除呢瞬铸，那不就是不生效了么？其實(shí)清除浮動(dòng)的意思不是清除你設(shè)置的元素的浮動(dòng)屬性础锐，而是清除設(shè)置了浮動(dòng)屬性之后給別的元素帶來的影響嗓节。舉個(gè)栗子：

<div class="father">
     <div class="son1"></div>
     <div class="son2"></div>
</div>

.father {
    width: 150px;
    border: 1px solid red;
}

.son1, .son2 {
    width: 50px;
    height: 50px;
    background-color: pink;
}

.son2 {
    background-color: purple;
}

正常情況下的樣子是上下塊撐開父元素的高度

image.png

image.png

當(dāng)設(shè)置父元素bfc后拦宣，此時(shí)就清除了子元素浮動(dòng)帶來的影響，什么影響呢，就是不撐開父元素的高度的影響鸵隧，那么父元素的高度就是子元素的高度
為父元素添加

overflow: hidden;

image.png

解決外邊距合并問題

????我們知道绸罗，兩個(gè)盒子在一起時(shí)，當(dāng)有相鄰的外邊距時(shí)豆瘫，會(huì)取外邊距較大的那一個(gè)珊蟀，也就是外邊距會(huì)合并，但這種情況只發(fā)生在同屬一個(gè)bfc的兩個(gè)盒子中間外驱，換言之育灸，要想解決外邊距合并問題，只要把兩個(gè)盒子放在不同的bfc中即可昵宇。

制作右側(cè)盒子自適應(yīng)寬度的問題（左側(cè)盒子寬度固定磅崭，右側(cè)寬度不固定）

????當(dāng)在父元素中只設(shè)定一個(gè)盒子浮動(dòng)，另一個(gè)不浮動(dòng)時(shí)趟薄，會(huì)造成第二個(gè)盒子在第一個(gè)盒子的下方绽诚，被覆蓋掉一部分（但文字不會(huì)被覆蓋）。

.father2 {
    width: 200px;
    border: 1px solid red;
}

.s1 {
    width: 50px;
    height: 50px;
    background-color: pink;
    float: left;
}

.s2 {
    background-color: purple;
    height: 100px;
}

image.png

給第2個(gè)元素設(shè)定bfc

.s2 {
    background-color: purple;
    height: 100px;
    overflow: auto;
    word-break: break-all;
}

image.png

當(dāng)增加第一個(gè)塊的寬度時(shí)杭煎，第二個(gè)塊的寬度會(huì)自動(dòng)縮小恩够，實(shí)現(xiàn)寬度自適應(yīng)。