BFC理解

nevermind 發布于2019-08-29 15:38 / 630人閱讀

摘要：解決高度塌陷的前提就是能識別并包含到浮動元素。那有沒有一個更好的高度檢測方法呢答案是有的，就是我們經常用到的。不支持，所以需要通過專有的屬性，觸發。

Block formatting context （塊級格式化上下文）

頁面文檔由塊block構成每個block在頁面上占據自己的位置
使用新的元素構建BFC overflow：hidden | auto | scroll；只要不為visible 新的空間
告訴瀏覽器，外面的環境影響不到我了我重新來進行Block formatting 布局和定位

核心：

新的BFC，給出了新的不受外界影響的塊級格式化環境  
block 塊級-> 頁面的基礎  
formatting context 格式化-> 渲染

瀏覽器構建文檔樹的時候布局和定位元素

網頁的定位（大）文檔流正常，浮動，定位，flex，table
廣義的定位塊級元素的定位垂直的定位；行內元素左右定位通過內容來確定
狹義的定位：
float 浮動元素，在一行的開始或者結束
flex 彈性布局
position

BFC 在正常的文檔流里面重建一個新的上下文環境

BFC的約束規則

一、在瀏覽器進行頁面元素布局的時候同一個BFC的兩個相鄰的Box的margin 會重疊，與方向無關

破壞規則 創建新的BFC Context上下文的概念

如何創建BFC？=>重新規劃一個（獨立）渲染區域

根元素body，天然是一個BFC

overflow:hidden;

float 不為none

display:inline-block | table-cell |table-caption

position:absolute | fixed 只要不為static

> 好像只剩塊級元素和行內元素不是BFC

二、BFC的高度，浮動元素也要參與計算

在元素float 之后脫離了文檔流沒有辦法計算確切高度，這種情況我們稱之為高度塌陷。解決高度塌陷的前提就是能識別并包含到浮動元素。而BFC就有這個特性，所以BFC也可以計算浮動元素的高度。新建BFC讓浮動元素也參與計算

三、每個元素的左邊，要與包含盒子的左邊相接觸

四、BFC的區域不會與float box重疊

/*BFC在三欄式布局中的應用*/
    


    
    
        
        Left
        Right
        Center

注意：

通過 overflow:hidden將元素轉換為BFC，固然可以解決高度塌陷的問題，但是大范圍的應用在布局上是肯定是行不通的，畢竟overflow會造成溢出隱藏的問題，特別是與JS交互的效果時。

那有沒有一個更好的高度檢測方法呢？
答案是有的，就是我們經常用到的clearfix。

.clearfix:after{
    content:"";
    display:table;
    clear:both
}
.clearfix{
    *zoom:1;/* IE6,7不支持BFC，所以需要通過專有的CSS屬性，觸發hasLayout。*/
}

關于zoom:1

GPU云服務器云服務器 bfc bfc布局全面理解理解

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

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

理解 CSS 布局和 BFC

摘要：布局中有一些概念，一旦你理解了它們，就能真正提高你的布局能力。我們通常有兩種方法來解決這個布局問題。是布局中的一個迷你布局你可以將看作是頁面內的一個迷你布局。理解瀏覽器如何布置網頁是非常基礎的。 CSS布局中有一些概念，一旦你理解了它們，就能真正提高你的 CSS 布局能力。本文是關于塊格式化上下文(BFC)的。你可能從未聽說過這個術語，但是如果你曾經用CSS做過布局，你可能知道它是什么...

miya 2019-08-30 15:43 評論0 收藏0
關于CSS里BFC特性的理解和應用

摘要：它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。而，塊級格式化上下文，就是一個塊級元素的渲染顯示規則。定位和清除浮動的樣式規則只適用于處于同一塊格式化上下文內的元素。什么是BFC（Block Formatting Context） Formatting context(格式化上下文) 是 W3C CSS2.1 規范中的一個概念...

shixinzhang 2019-08-29 16:34 評論0 收藏0
關于CSS里BFC特性的理解和應用

摘要：它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。而，塊級格式化上下文，就是一個塊級元素的渲染顯示規則。定位和清除浮動的樣式規則只適用于處于同一塊格式化上下文內的元素。什么是BFC（Block Formatting Context） Formatting context(格式化上下文) 是 W3C CSS2.1 規范中的一個概念...

vspiders 2019-08-02 11:24 評論0 收藏0
JS每日一題: 如何理解CSS中BFC?

摘要：期如何理解中定義塊格式化上下文，是頁面的可視化渲染的一部分，是塊盒子的布局過程發生的區域，也是浮動元素與其他元素交互的區域。 20190416期如何理解CSS中BFC? 定義: 塊格式化上下文（Block Formatting Context，BFC）是Web頁面的可視化CSS渲染的一部分，是塊盒子的布局過程發生的區域，也是浮動元素與其他元素交互的區域。 BFC 特性及應用同一個...

lentoo 2019-08-23 16:58 評論0 收藏0
5分鐘理解BFC原理

摘要：一概念即塊級格式化上下文，它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。通俗一點來講，可以把理解為一個封閉的大箱子，箱子內部的元素無論如何翻江倒海，都不會影響到外部。一、BFC概念 BFC 即 Block Formatting Contexts (塊級格式化上下文)，它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子...

Achilles 2019-08-02 10:58 評論0 收藏0
5分鐘理解BFC原理

摘要：一概念即塊級格式化上下文，它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。通俗一點來講，可以把理解為一個封閉的大箱子，箱子內部的元素無論如何翻江倒海，都不會影響到外部。一、BFC概念 BFC 即 Block Formatting Contexts (塊級格式化上下文)，它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子...

tulayang 2019-08-30 15:54 評論0 收藏0