資訊專欄INFORMATION COLUMN
摘要：一直都知道可以清除浮動，但是卻不知道這背后的原理。查了眾多資料后才發現有這么個東西，寫這篇文章一是為了加深記憶，二是為了加深理解。解決方案如下給添加一個屬性便會避開計算內層元素的高度。但如果高度有具體的值時，高度超過時還是會被裁剪。
一直都知道overflow可以清除浮動，但是卻不知道這背后的原理。查了眾多資料后才發現有BFC這么個東西，寫這篇文章一是為了加深記憶，二是為了加深理解。
什么是BFC？
BFC的全稱是Block Formatting Context 塊級格式化上下文。
一般情況下BFC只存在于根級元素，但有時我們在設置某些CSS屬性時也會產生BFC。但是前提是必須是塊級元素。
以下屬性聲明會產生BFC：
1、float不為none
2、overflow不為visible
3、position不為static和relative
4、display為inline-block table-cell table-caption
5、flex、inline-flex布局
BFC布局規則
1、內部元素會垂直排列
2、垂直方向的間隔由margin決定，同一個BFC里同級別的兩個元素之間的margin會產生坍塌
3、元素會靠在外層元素的左邊或者右邊，float同理
4、BFC不會與float重疊（absolute,fixed除外）
5、BFC計算高度時，float元素的高度也參與計算
6、BFC是隔離的，它里面元素就算翻江倒海也不會影響外層，外層的各種變化也不會影響BFC。
BFC應用
解決margin坍塌
elementA與elementB之間的實際margin為10px;
在elementB的外層添加一個div設置BFC屬性，此時elementA, elementB的間隔為20px,代碼如下：
解決float覆蓋
123
以上代碼中，elmentA會覆蓋到elementB上。
解決方案如下,給elementB添加一個BFC屬性elementB便會避開elementA：
123
計算內層float元素的高度。
上述代碼中，wrapper是沒有高度的，雖然子元素設置了高度為100px,但是由于子元素是float所以父元素沒有高度。
解決方案如下,給wrapper添加一個BFC屬性，這時wrapper的高度就為子元素的高度：
對overflow：hidden的額外說明
當設置了一個元素為樣式為：
overflow：hidden height:auto
元素首先會計算出自己的高度才知道應該裁剪哪一部分，當生成BFC時會首先計算里面元素的高度,當里面有float元素時會計算float元素的高度，并把float元素的高度加到自身高度中。但如果高度有具體的值時，float高度超過時還是會被裁剪。
對position:absolute以及position:fixed的額外說明
在本文前面提到過 BFC的區域不會和float區域重疊，但是absolute和fixed布局有例外。absolute和fixed會覆蓋到float元素上，因為absolute和fixed已經脫離文檔流。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/52114.html
摘要：標準盒模型與盒模型開發者們都知道，由于歷史遺留問題與既定標準的發展，存在著兩個盒模型。即的標準盒模型以及的怪異盒模型。在中，可以用去定義元素的盒模型。比較這兩個盒模型的差異之前，我們先來看一張圖先不討論寬高，我們把一個元素的組成分為。 標準盒模型與IE盒模型 開發者們都知道，由于歷史遺留問題與既定標準的發展，存在著兩個css盒模型。即W3C的標準盒模型以及IE的怪異盒模型。在css中，...
摘要：最常見的有簡稱和簡稱。計算的高度時，浮動元素也參與計算。遇到這種情形，我們如何處理處理方法其實有很多，在元素中添加或者使其父元素形成一個也可以在元素中添加或是這些都可以有效解決父子元素重疊問題。解決這個問題，只需要把把父元素變成一個就行了。 一、什么是BFC Formatting context 是 W3C CSS2.1 規范中的一個概念。它是頁面中的一塊渲染區域，并且有一套渲染規則，...
閱讀 648·2021-10-27 14:15
閱讀 1182·2021-10-15 09:42
閱讀 2745·2019-08-30 15:53
閱讀 1287·2019-08-23 17:02
閱讀 2964·2019-08-23 16:23
閱讀 3181·2019-08-23 15:57
閱讀 3464·2019-08-23 14:39
閱讀 517·2019-08-23 14:35
