BFC

yanwei 發布于2019-08-30 11:25 / 3648人閱讀

摘要：簡稱簡稱中只有和中還增加了和定義直譯為塊級格式化上下文。它是一個獨立的渲染區域，只有參與，它規定了內部的如何布局，并且與這個區域外部毫不相干。

BFC

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

BFC 定義：
BFC直譯為"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與，它規定了內部的Block-level Box如何布局，并且與這個區域外部毫不相干。

這些元素會觸發BFC:（子元素有浮動直接在父元素上添加一下內容即可）
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 意為：觸發BFC 兼容不太好 css新加的

BFC功能：
1、讓BFC內部元素被包起來
2、讓兩個相鄰元素界限分明

應用場景

BFC 使用場景
面試。。。。剩下時間避免使用
不要用BFC清除浮動（BFC清除有副作用用clear：both 或者 display：flow-root ）

 //BFC可以包住浮動元素
    
    .father{}
    .child{
        height:100px;
        background:rgba(0,255,0,1);
        margin-top:100px;
    }
    
    //這個父級的高度是從子級開始的 ！！！
    //除非觸發BFC（加overflow：hidden）父級高度才會從頂部計算

    // 用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
        //如果沒有這個BFC 就會跟這個浮動元素不清不楚 想讓這兩個分隔
    }

BFC 和文檔流

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

GPU云服務器云服務器 bfc bfc布局

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114982.html

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

摘要：元素的特性全稱為，中文為塊級格式化上下文。應用之利用特性解決塌陷問題塌陷是一般指在標準文檔流中，兩個垂直排列的元素，一設置個，另一個設置，此時兩個元素的就會發生重疊。 1、元素的BFC特性 BFC全稱為Block Formartting Context，中文為塊級格式化上下文。它是頁面中的一塊獨立的渲染環境，并且有一套渲染規則，它決定了其子元素將如何定位，以及它和其他兄弟元素的關系和相...

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

摘要：元素的特性全稱為，中文為塊級格式化上下文。應用之利用特性解決塌陷問題塌陷是一般指在標準文檔流中，兩個垂直排列的元素，一設置個，另一個設置，此時兩個元素的就會發生重疊。 1、元素的BFC特性 BFC全稱為Block Formartting Context，中文為塊級格式化上下文。它是頁面中的一塊獨立的渲染環境，并且有一套渲染規則，它決定了其子元素將如何定位，以及它和其他兄弟元素的關系和相...

chanthuang 2019-08-02 14:09 評論0 收藏0
BFC 神奇背后的原理（轉）

摘要：最常見的有簡稱和簡稱。根據布局規則第四條的區域不會與重疊。根據布局規則第二條垂直方向的距離由決定。同樣的，當內部有浮動時，為了不影響外部元素的布局，計算高度時會包括浮動的高度。避免重疊也是這樣的一個道理。 BFC 已經是一個耳聽熟聞的詞語了，網上有許多關于 BFC 的文章，介紹了如何觸發 BFC 以及 BFC 的一些用處（如清浮動，防止 margin 重疊等）。雖然我知道如何利用 BF...

April 2019-08-29 12:56 評論0 收藏0
BFC 神奇背后的原理（轉）

摘要：最常見的有簡稱和簡稱。根據布局規則第四條的區域不會與重疊。根據布局規則第二條垂直方向的距離由決定。同樣的，當內部有浮動時，為了不影響外部元素的布局，計算高度時會包括浮動的高度。避免重疊也是這樣的一個道理。 BFC 已經是一個耳聽熟聞的詞語了，網上有許多關于 BFC 的文章，介紹了如何觸發 BFC 以及 BFC 的一些用處（如清浮動，防止 margin 重疊等）。雖然我知道如何利用 BF...

wawor4827 2019-08-01 17:07 評論0 收藏0
CSS中重要的BFC

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

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

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

Cruise_Chan 2019-08-02 16:17 評論0 收藏0