BFC

yanwei 發(fā)布于2019-08-30 11:25 / 3673人閱讀

摘要：簡(jiǎn)稱(chēng)簡(jiǎn)稱(chēng)中只有和中還增加了和定義直譯為塊級(jí)格式化上下文。它是一個(gè)獨(dú)立的渲染區(qū)域，只有參與，它規(guī)定了內(nèi)部的如何布局，并且與這個(gè)區(qū)域外部毫不相干。

BFC

Block fomatting context (簡(jiǎn)稱(chēng)BFC)
Inline formatting context (簡(jiǎn)稱(chēng)IFC)
CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 GFC 和 FFC

BFC 定義：
BFC直譯為"塊級(jí)格式化上下文"。它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與，它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個(gè)區(qū)域外部毫不相干。

這些元素會(huì)觸發(fā)BFC:（子元素有浮動(dòng) 直接在父元素上添加一下內(nèi)容即可）
1、根元素 -- HTML元素
2、float屬性不為none
3、position為absolute或fixed
4、display為inline-block, table-cell, table-caption, flex, inline-flex，
5、overflow不為visible
6、flow-root 意為：觸發(fā)BFC 兼容不太好 css新加的

BFC功能：
1、讓BFC內(nèi)部元素被包起來(lái)
2、讓兩個(gè)相鄰元素界限分明

應(yīng)用場(chǎng)景

BFC 使用場(chǎng)景
面試。。。。剩下時(shí)間避免使用
不要用BFC清除浮動(dòng)（BFC清除有副作用用clear：both 或者 display：flow-root ）

 //BFC可以包住浮動(dòng)元素
    
    .father{}
    .child{
        height:100px;
        background:rgba(0,255,0,1);
        margin-top:100px;
    }
    
    //這個(gè)父級(jí)的高度是從子級(jí)開(kāi)始的 ?。。?    //除非觸發(fā)BFC（加overflow：hidden）父級(jí)高度才會(huì)從頂部計(jì)算

    // 用flow + div 做左右布局
    .father{
        width:100px;
        min-height:600px;
        border:3px solid red;
        float:left;
        margin-right:20px;
    }
    .child{
        min-height:600px;
        border:5px solid green;
        overflow:auto; // display:flow-root
        //如果沒(méi)有這個(gè)BFC 就會(huì)跟這個(gè)浮動(dòng)元素不清不楚 想讓這兩個(gè)分隔
    }

BFC 和文檔流

文檔流影響的是這個(gè)元素的排列順序
BFC 影響的是這個(gè)元素的寬高

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/114982.html

相關(guān)文章

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

摘要：元素的特性全稱(chēng)為，中文為塊級(jí)格式化上下文。應(yīng)用之利用特性解決塌陷問(wèn)題塌陷是一般指在標(biāo)準(zhǔn)文檔流中，兩個(gè)垂直排列的元素，一設(shè)置個(gè)，另一個(gè)設(shè)置，此時(shí)兩個(gè)元素的就會(huì)發(fā)生重疊。 1、元素的BFC特性 BFC全稱(chēng)為Block Formartting Context，中文為塊級(jí)格式化上下文。它是頁(yè)面中的一塊獨(dú)立的渲染環(huán)境，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及它和其他兄弟元素的關(guān)系和相...

岳光 2019-08-30 15:55 評(píng)論0 收藏0
CSS BFC特性(塊級(jí)格式化上下文)

摘要：元素的特性全稱(chēng)為，中文為塊級(jí)格式化上下文。應(yīng)用之利用特性解決塌陷問(wèn)題塌陷是一般指在標(biāo)準(zhǔn)文檔流中，兩個(gè)垂直排列的元素，一設(shè)置個(gè)，另一個(gè)設(shè)置，此時(shí)兩個(gè)元素的就會(huì)發(fā)生重疊。 1、元素的BFC特性 BFC全稱(chēng)為Block Formartting Context，中文為塊級(jí)格式化上下文。它是頁(yè)面中的一塊獨(dú)立的渲染環(huán)境，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及它和其他兄弟元素的關(guān)系和相...

chanthuang 2019-08-02 14:09 評(píng)論0 收藏0
BFC 神奇背后的原理（轉(zhuǎn)）

摘要：最常見(jiàn)的有簡(jiǎn)稱(chēng)和簡(jiǎn)稱(chēng)。根據(jù)布局規(guī)則第四條的區(qū)域不會(huì)與重疊。根據(jù)布局規(guī)則第二條垂直方向的距離由決定。同樣的，當(dāng)內(nèi)部有浮動(dòng)時(shí)，為了不影響外部元素的布局，計(jì)算高度時(shí)會(huì)包括浮動(dòng)的高度。避免重疊也是這樣的一個(gè)道理。 BFC 已經(jīng)是一個(gè)耳聽(tīng)熟聞的詞語(yǔ)了，網(wǎng)上有許多關(guān)于 BFC 的文章，介紹了如何觸發(fā) BFC 以及 BFC 的一些用處（如清浮動(dòng)，防止 margin 重疊等）。雖然我知道如何利用 BF...

April 2019-08-29 12:56 評(píng)論0 收藏0
BFC 神奇背后的原理（轉(zhuǎn)）

摘要：最常見(jiàn)的有簡(jiǎn)稱(chēng)和簡(jiǎn)稱(chēng)。根據(jù)布局規(guī)則第四條的區(qū)域不會(huì)與重疊。根據(jù)布局規(guī)則第二條垂直方向的距離由決定。同樣的，當(dāng)內(nèi)部有浮動(dòng)時(shí)，為了不影響外部元素的布局，計(jì)算高度時(shí)會(huì)包括浮動(dòng)的高度。避免重疊也是這樣的一個(gè)道理。 BFC 已經(jīng)是一個(gè)耳聽(tīng)熟聞的詞語(yǔ)了，網(wǎng)上有許多關(guān)于 BFC 的文章，介紹了如何觸發(fā) BFC 以及 BFC 的一些用處（如清浮動(dòng)，防止 margin 重疊等）。雖然我知道如何利用 BF...

wawor4827 2019-08-01 17:07 評(píng)論0 收藏0
CSS中重要的BFC

摘要：中有個(gè)重要的概念，搞懂可以讓我們理解中某些原本詭異的地方。簡(jiǎn)介在解釋之前，先說(shuō)一下文檔流。我們常說(shuō)的文檔流其實(shí)分為定位流浮動(dòng)流普通流三種。使用包含浮動(dòng)元素注意，這里觸發(fā)并不能阻止其它形式的脫離文檔流的元素覆蓋正常流元素。 CSS中有個(gè)重要的概念BFC，搞懂BFC可以讓我們理解CSS中某些原本詭異(??)的地方。 1. 簡(jiǎn)介在解釋BFC之前，先說(shuō)一下文檔流。我們常說(shuō)的文檔流其實(shí)分為定位...

plus2047 2019-08-29 14:20 評(píng)論0 收藏0
# 是的，是你的BFC - CSS中常用

摘要：根據(jù)布局規(guī)則第四條的區(qū)域不會(huì)與重疊。因此會(huì)根據(jù)包含塊的寬度，和的寬度，自動(dòng)變窄。根據(jù)布局規(guī)則第二條垂直方向的距離由決定。同樣的，當(dāng)內(nèi)部有浮動(dòng)時(shí)，為了不影響外部元素的布局，計(jì)算高度時(shí)會(huì)包括浮動(dòng)的高度。避免重疊也是這樣的一個(gè)道理。 CFC 全稱(chēng)：(Block Formatting Contexts)含義是塊級(jí)格式化上下文)，就是一個(gè)塊級(jí)元素的渲染顯示規(guī)則一、簡(jiǎn)易理解.定義可以把 BF...

Cruise_Chan 2019-08-02 16:17 評(píng)論0 收藏0