CSS BFC特性(塊級格式化上下文)

岳光發(fā)布于2019-08-30 15:55 / 3765人閱讀

摘要：元素的特性全稱為，中文為塊級格式化上下文。應(yīng)用之利用特性解決塌陷問題塌陷是一般指在標(biāo)準(zhǔn)文檔流中，兩個垂直排列的元素，一設(shè)置個，另一個設(shè)置，此時兩個元素的就會發(fā)生重疊。

1、元素的BFC特性

BFC全稱為”Block Formartting Context”，中文為”塊級格式化上下文”。它是頁面中的一塊獨(dú)立的渲染環(huán)境，并且有一套渲染規(guī)則，
它決定了其子元素將如何定位，以及它和其他兄弟元素的關(guān)系和相互作用。

BFC布局規(guī)則：

1）bfc內(nèi)部的元素會在垂直方向，一個接一個地放置
2）盒子垂直方向的距離有margin決定，屬于同一個bfc的兩個相鄰元素的margin會發(fā)生重疊
3）每個盒子的左外邊緣(margin-left)會與其父元素的左邊緣(border-left)相接觸
4）bfc的區(qū)域會通過變窄來自適應(yīng)而不會與float元素重疊在一起
5）bfc的高度計(jì)算時，浮動元素也參與計(jì)算。即創(chuàng)建了新的bfc的元素的高度會把內(nèi)部浮動元素的高度也算進(jìn)去
6）bfc是頁面上一個隔離的獨(dú)立容器，容器內(nèi)的子元素不會影響到外面的元素；同理容器內(nèi)的子元素也不會影響到父元素外面的
其他元素。

創(chuàng)建BFC的條件：

a）html元素
b）float的值不為none
c）overflow的值為auto、hidden或scroll
d）display的值為table-cell、inline-block、table-caption、flex、inline-flex
e）position的值不為relative和static

2、BFC作用----理解BFC(個人理解)

1、因?yàn)閎fc內(nèi)部的元素與外部的元素絕對不會互相影響，因此當(dāng)bfc元素的兄弟元素有浮動時，它不應(yīng)該影響bfc內(nèi)部元素的布局，
所以bfc會通過變窄來自適應(yīng)，而不會與浮動元素發(fā)生重疊；

2、同樣的，當(dāng)bfc內(nèi)部有浮動時，為了不影響外部元素的布局，bfc計(jì)算高度時會把浮動元素的高度也計(jì)算進(jìn)去。
利用bfc避免margin重疊也是同樣的道理。

3、BFC應(yīng)用之：利用bfc特性實(shí)現(xiàn)左側(cè)不固定，右側(cè)也不固定的布局

圖片來自：張鑫旭--粉絲群第1期CSS小測點(diǎn)評與答疑
如圖：這種布局在移動端一般比較常見，左側(cè)文字寬度不固定，右測文字寬度不固定，文字?jǐn)嘈泻笠惨３滞瑯拥男芯唷Ｔ谝苿佣酥锌梢允褂胒lex布局，grid布局，如果不使用css3布局，我們能否實(shí)現(xiàn)呢？答案是可以的，可以使用 浮動+bfc 特性！




    手機(jī)系統(tǒng)
    Android
    登錄方式
    QQ互聯(lián)登錄
    綁定事件
    2019-01-02 00:01
    其他
    FAsfsdafsadfasdfSDsadfsadfsd4545454555454545sdafsdf
    備注
    如果需要修改綁定，請聯(lián)系HR進(jìn)行修改！

下圖是dd創(chuàng)建了bfc與未創(chuàng)建bfc的對比：

由圖片可以看出，創(chuàng)建了bfc的dd的寬度自適應(yīng)的變窄了，而未創(chuàng)建bfc的dd卻與浮動的dt重合了。

4、BFC應(yīng)用之：利用bfc特性解決margin塌陷問題

margin塌陷是一般指在標(biāo)準(zhǔn)文檔流中，兩個垂直排列的元素，一設(shè)置個margin-bottom，另一個設(shè)置margin-top，此時兩個元素的margin就會發(fā)生重疊。
margin重疊規(guī)則：

1）margin的值都為正數(shù)時，取它們之間較大的值
2）margin的值都為負(fù)數(shù)時，取兩個margin絕對值中較大的值
3）兩個margin一正一負(fù)時，取兩個margin相加的和

margin塌陷與不塌陷效果：




    
        margin未塌陷
        margin: 20px 0;
        margin: 20px 0;
    
    
        margin塌陷
        margin: 20px 0;
        
            margin: 20px 0;

6、參考文章

1、https://www.zhangxinxu.com/wo... (引導(dǎo)文章)
2、https://www.zhangxinxu.com/wo...
3、https://www.w3cplus.com/css/u...
4、https://blog.csdn.net/w362427...
5、https://blog.csdn.net/shadow_...