加深理解BFC

yanwei 發布于2019-08-30 13:57 / 3323人閱讀

摘要：相關定義是規定中的一個概念。最常見的有簡稱和簡稱。中只有和，中還增加了和。布局規則內部的會在垂直方向，一個接一個地放置垂直方向地距離由決定。計算的高度時，浮動元素頁參與計算。我們的做法是包一層標簽，并轉化成。

1、相關定義 1.1 Formatting context

Formatting context是W3C CSS2.1規定中的一個概念。它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素如何定位，以及和其他元素的關系和相互作用。最常見的Formatting context有Block formatting context（簡稱BFC）和Inline formatting context（簡稱IFC）。
css2.1中只有BFC和IFC，css3中還增加了GFC和FFC。

1.2 BFC定義

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

1.3 BFC布局規則：

內部的Box會在垂直方向，一個接一個地放置；

Box垂直方向地距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊

每個元素的margin box的左邊，與包含塊border box的左邊相接觸（對于從左往右的格式化，否則相反）。即便存在浮動也是如此。

BFC的區域不會與float box重疊。

BFC就是頁面的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。

計算BFC的高度時，浮動元素頁參與計算。

2、作用 2.1 可生成BFC的元素

根元素html；

float屬性不為none；

position為absolute或fixed；

display為inline-block， table-cell，table-caption，flex， inline-flex；

overflow不為visible；

2.2 場景一：對于兩欄或三欄浮動自適應布局，包含塊邊接觸問題。



    我是左邊區域塊        
    我是右邊區域塊
    我是中間區域塊

中間自適應欄邊界會延展左右浮動區域

此時需要把中間欄變成BFC

.left-center-right.float .center {
    background-color: rgb(13, 218, 233);
    height: 200px;
    overflow: hidden;
}

2.3 場景二：子級元素有浮動，父級元素塌陷問題



    我是左邊區域塊
    我是右邊區域塊

此時需要將父級元素變成BFC

.all-children-float {
    position: absolute;
}

2.3 場景三：垂直方向margin出現重合



    我是區域塊1
    我是區域塊2

Box垂直方向的距離margin決定，屬于同一個BFC的兩個相鄰Box的margin會發生重疊。

我們的做法是包一層標簽，并轉化成BFC。

.wrapper1 {
    overflow: hidden;
}


    
        我是區域塊1
            
    我是區域塊2

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

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

BFC深入理解

摘要：一直都知道可以清除浮動，但是卻不知道這背后的原理。查了眾多資料后才發現有這么個東西，寫這篇文章一是為了加深記憶，二是為了加深理解。解決方案如下給添加一個屬性便會避開計算內層元素的高度。但如果高度有具體的值時，高度超過時還是會被裁剪。一直都知道overflow可以清除浮動，但是卻不知道這背后的原理。查了眾多資料后才發現有BFC這么個東西，寫這篇文章一是為了加深記憶，二是為了加深理解。 ...

yiliang 2019-08-30 14:20 評論0 收藏0
BFC深入理解

摘要：一直都知道可以清除浮動，但是卻不知道這背后的原理。查了眾多資料后才發現有這么個東西，寫這篇文章一是為了加深記憶，二是為了加深理解。解決方案如下給添加一個屬性便會避開計算內層元素的高度。但如果高度有具體的值時，高度超過時還是會被裁剪。一直都知道overflow可以清除浮動，但是卻不知道這背后的原理。查了眾多資料后才發現有BFC這么個東西，寫這篇文章一是為了加深記憶，二是為了加深理解。 ...

王陸寬 2019-08-02 10:05 評論0 收藏0
margin合并、塌陷，清除浮動

摘要：合并的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。那我們怎么辦，回到主題清除浮動。你可能忘了偽元素是行內元素，只有塊元素才能清除浮動。所以我們最好后，主動清除一下浮動，避免以后遇到很奇怪的問題。這是我的第一篇掘金文章，希望大家不要嫌棄。我還是一名在校大學生，就是想把自己所學到的知識寫出來，加深自己的印象，記錄自己成長的過程，這篇文章主要是介紹HTML 、 CSS 的一些小知...

Alliot 2019-08-30 15:55 評論0 收藏0
margin合并、塌陷，清除浮動

摘要：合并的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。那我們怎么辦，回到主題清除浮動。你可能忘了偽元素是行內元素，只有塊元素才能清除浮動。所以我們最好后，主動清除一下浮動，避免以后遇到很奇怪的問題。這是我的第一篇掘金文章，希望大家不要嫌棄。我還是一名在校大學生，就是想把自己所學到的知識寫出來，加深自己的印象，記錄自己成長的過程，這篇文章主要是介紹HTML 、 CSS 的一些小知...

MadPecker 2019-08-02 14:01 評論0 收藏0
側邊欄的固定與自適應原來是這樣實現的（持續更新）

摘要：規范文檔，行內非替換元素背景高度由字體和字體大小決定的，默認處理和行高沒關系，不過這只是瀏覽器現在的處理方法摘自參考。不過實際上這個對樣式的影響不是很大或者設置。的值除了也是可以為數值的。的區域不會與重疊。摘要剛看了一個關于前端面試題的帖子，有些css題雖然能答出來，但出于學習的目的與好奇心，覺得有必要加深一下對功能實現原理的了解。整理出一份文檔，共勉。正文行內元素的高 ...

sarva 2019-08-30 14:06 評論0 收藏0