BFC

時間 2019-11-08

標籤 bfc 简体版

原文原文鏈接

一.定義

BFC(Block formatting context)直譯爲"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與，它規定了內部的Block-level Box如何佈局，而且與這個區域外部絕不相干。瀏覽器

Formatting context 是 W3C CSS2.1 規範中的一個概念。它是頁面中的一塊渲染區域，而且有一套渲染規則，它決定了其子元素將如何定位，以及和其餘元素的關係和相互做用。最多見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。ide

二. 觸發 BFC

body
根元素
浮動元素：float 除 none 之外的值
絕對定位元素：position (absolute、fixed)
display 爲 inline-block、table-cells、flex
overflow 除了 visible 之外的值 (hidden、auto、scroll)佈局

但其中，最多見的就是overflow:hidden、float:left/right、position:absolute。也就是說，每次看到這些屬性的時候，就表明了該元素以及建立了一個BFC了。flex

三. 使用場景

1.利用BFC避免外邊距摺疊

兩元素之間的間距只有100px，也就是重疊了。
若是想要避免外邊距的重疊，能夠將其放在不一樣的 BFC 容器中。

<style>
        .bfc {
            overflow: hidden;
        }
        .bfc div {
            width: 100px;
            height: 100px;
            background:aqua;
            margin: 100px;
        }
</style>
<body>
    <div class="bfc">
        <div></div>
    </div>
    <div class="bfc">
        <div></div>
    </div>
</body>

2.BFC 清除浮動

浮動元素是會脫離文檔流的(絕對定位元素會脫離文檔流)。若是一個沒有高度或者height是auto的容器的子元素是浮動元素，則該容器的高度是不會被撐開的。咱們一般會利用僞元素(:after或者:before)來解決這個問題。BFC能包含浮動，也能解決容器高度不會被撐開的問題。
code

<style>
        .container {
            border: 2px solid rebeccapurple;
        }
        .container div {
            width: 100px;
            height: 100px;
            background:aqua;
            margin: 10px;
            float: left;
        }
</style>
<body>
    <div class="container">
        <div></div>
        <div></div>
    </div>
    <div class="bfc">
        <div></div>
    </div>
</body>

在上面這個例子中，容器沒有任何高度，而且它包不住浮動子元素，容器的高度並不會被撐開。爲解決這個問題，能夠在容器中建立一個BFC：
.container { overflow: hidden; border: 2px solid rebeccapurple; }orm

3. 使用BFC避免文字環繞

.container {
            width:300px;
        }
        .floated {
            float: left;
            width:50px;
            height: 50px;
            background: red;
   }
<div class="container">
        <div class="floated">
            Float
        </div>
        <p>
            jaaahahhahahhaha Quae hic ut ab perferendis sit quod architecto, 
            dolor debitis quam rem provident aspernatur tempora
            expedita.
        </p>
</div>

p 元素沒有移位但它疊在了浮動元素之下，而p元素的文本(行盒子)卻移位了，行盒子水平變窄來給浮動元素騰出了空間。隨着文本的增長，最後文本將環繞在浮動元素之下，由於那時候行盒子再也不須要移位，也就成了圖中的樣子。
此時只要把p設置成BFC 就能夠避免文字環繞blog

4. 全屏多列布局防止瀏覽器屬性換行

若是咱們建立一個佔滿整個容器寬度的多列布局，在某些瀏覽器中最後一列有時候會掉到下一行。這多是由於瀏覽器四捨五入了列寬從而全部列的總寬度會超出容器。但若是咱們在多列布局中的最後一列裏建立一個新的BFC，它將老是佔據其餘列先佔位完畢後剩下的空間rem

<div class="container">
        <div class="column">column 1</div>
        <div class="column">column 2</div>
        <div class="column">column 3</div>
</div>
.column {
            width: 31.33%;
            background-color: yellowgreen;
            float: left;
            margin: 0 1%;
  }

最後一個元素用BFC文檔

.column:last-child {
    float: none;
overflow: hidden; 
}

相關標籤/搜索

bfc

深刻BFC

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

BFC

一.定義

二. 觸發 BFC

三. 使用場景

1.利用BFC避免外邊距摺疊

2.BFC 清除浮動

3. 使用BFC避免文字環繞

4. 全屏多列布局防止瀏覽器屬性換行