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

時間 2019-11-06

標籤 css bfc 特性格式化上下文欄目 CSS 简体版

原文原文鏈接

一、元素的BFC特性

BFC全稱爲」Block Formartting Context」，中文爲」塊級格式化上下文」。它是頁面中的一塊獨立的渲染環境，而且有一套渲染規則，
它決定了其子元素將如何定位，以及它和其餘兄弟元素的關係和相互做用。css

BFC佈局規則：html

1）bfc內部的元素會在垂直方向，一個接一個地放置
2）盒子垂直方向的距離有margin決定，屬於同一個bfc的兩個相鄰元素的margin會發生重疊
3）每一個盒子的左外邊緣(margin-left)會與其父元素的左邊緣(border-left)相接觸
4）bfc的區域會經過變窄來自適應而不會與float元素重疊在一塊兒
5）bfc的高度計算時，浮動元素也參與計算。即建立了新的bfc的元素的高度會把內部浮動元素的高度也算進去
6）bfc是頁面上一個隔離的獨立容器，容器內的子元素不會影響到外面的元素；同理容器內的子元素也不會影響到父元素外面的
其餘元素。

建立BFC的條件：css3

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

二、BFC做用----理解BFC(我的理解)

一、由於bfc內部的元素與外部的元素絕對不會互相影響，所以當bfc元素的兄弟元素有浮動時，它不該該影響bfc內部元素的佈局，
因此bfc會經過變窄來自適應，而不會與浮動元素髮生重疊；

二、一樣的，當bfc內部有浮動時，爲了避免影響外部元素的佈局，bfc計算高度時會把浮動元素的高度也計算進去。
利用bfc避免margin重疊也是一樣的道理。

三、BFC應用之：利用bfc特性實現左側不固定，右側也不固定的佈局

圖片來自：張鑫旭--粉絲羣第1期CSS小測點評與答疑
如圖：這種佈局在移動端通常比較常見，左側文字寬度不固定，右測文字寬度不固定，文字斷行後也要保持一樣的行距。在移動端中可使用flex佈局，grid佈局，若是不使用css3佈局，咱們可否實現呢？答案是能夠的，可使用 浮動+bfc 特性！wordpress

<style>
    body,dl,dd,dt,p{ padding: 0;margin: 0; }
    dl{
        width: 30%;
        padding: 10px;
        border: 1px solid #ccc;
        margin: 10px auto;
    }
    dt{
        float: left; margin-right: 25px;
    }
    dd{
        margin-bottom: 10px;
        word-break: break-all;
        text-align: left;
/* 爲dd元素建立一個bfc，根據bfc佈局規則第4條，bfc的區域會經過變窄來自適應而不會與float元素重疊在一塊兒，
全部這就達到了咱們想要的效果。 */
        overflow: hidden;
    }
</style>

<dl class="dl2">
    <dt>手機系統</dt>
    <dd>Android</dd>
    <dt>登陸方式</dt>
    <dd>QQ互聯登陸</dd>
    <dt>綁定事件</dt>
    <dd>2019-01-02 00:01</dd>
    <dt>其餘</dt>
    <dd>FAsfsdafsadfasdfSDsadfsadfsd4545454555454545sdafsdf</dd>
    <dt>備註</dt>
    <dd>若是須要修改綁定，請聯繫HR進行修改！</dd>
</dl>

下圖是dd建立了bfc與未建立bfc的對比：

佈局

由圖片能夠看出，建立了bfc的dd的寬度自適應的變窄了，而未建立bfc的dd卻與浮動的dt重合了。flex

四、BFC應用之：利用bfc特性解決margin塌陷問題

margin塌陷是通常指在標準文檔流中，兩個垂直排列的元素，一設置個margin-bottom，另外一個設置margin-top，此時兩個元素的margin就會發生重疊。
margin重疊規則：ui

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

margin塌陷與不塌陷效果：
spa

<style>
    body,dl,dd,dt,p{ padding: 0;margin: 0; }

    .float-container{
        width: 30%;
        margin: 50px auto;
        padding: 10px;
        border: 1px solid #ccc;
        overflow: hidden;
    }
    .float-box{
        /* 元素浮動後就建立了bfc，兩個元素就建立了兩個bfc，根據BFC佈局規則第5條，.float-container的高度會把浮動元素的高度也計
        算進去；根據BFC佈局規則第2條，兩個.float-box分別建立了2個bfc，所以它們之間的margin並不會重疊 */
        float: left;
        width: 100%;
        height: 60px;
        margin: 20px 0;
        color: #fff;
    }
    .float-box:nth-child(1){background-color: #ccc;}
    .float-box:nth-child(2){background-color: #f10;}

    .no-bfc-container{
        width: 30%;
        margin: 50px auto;
        padding: 10px;
        border: 1px solid #ccc;
    }
    .no-bfc-box{
        height: 60px;
        margin: 20px 0;
        color: #fff;
    }
    .no-bfc-box:nth-child(1){background-color: #ccc;}
    .no-bfc-box:nth-child(2){background-color: #f10;}
    .bfc-box{
        /* 根據BFC佈局規則第2條，.bfc-box建立了一個bfc，與第一個.no-bfc-boxbu元素不屬於同一個bfc，所以兩個.no-bfc-box元素的
        margin也不會發生重疊 */
        overflow: hidden;
    }
</style>

<body>
    <div class="float-container">
        margin未塌陷
        <div class="float-box">margin: 20px 0;</div>
        <div class="float-box">margin: 20px 0;</div>
    </div>
    <div class="no-bfc-container">
        margin塌陷
        <div class="no-bfc-box">margin: 20px 0;</div>
        <div class="bfc-box">
            <div class="no-bfc-box">margin: 20px 0;</div>
        </div>
    </div>
</body>