資訊專欄INFORMATION COLUMN
摘要：根據(jù)布局規(guī)則第四條的區(qū)域不會與重疊。因此會根據(jù)包含塊的寬度，和的寬度，自動變窄。根據(jù)布局規(guī)則第二條垂直方向的距離由決定。同樣的，當(dāng)內(nèi)部有浮動時，為了不影響外部元素的布局，計算高度時會包括浮動的高度。避免重疊也是這樣的一個道理。
CFC 全稱：(Block Formatting Contexts)含義是塊級格式化上下文)，就是一個塊級元素的渲染顯示規(guī)則
一、簡易理解.定義
可以把 BFC 理解為一個封閉的大箱子，容器里面的子元素不會影響到外面的元素，同時外面的元素也不會影響我們?nèi)萜鲀?nèi)的子元素。
二、BFC布局規(guī)則
內(nèi)部的盒子會在垂直方向，一個個地放置；
屬于同一個BFC的 兩個相鄰Box的 上下margin會發(fā)生重疊 ；
每個元素的左邊，與包含的盒子的左邊相接觸，即使存在浮動也是如此；
BFC的區(qū)域不會與float重疊；
BFC是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之亦然
計算BFC的高度時，浮動元素也參與計算
三、哪些元素會生成BFC?
只要元素滿足下面任一條件即可觸發(fā) BFC 特性：
body 根元素；
浮動元素：float 不為none的屬性值；
絕對定位元素：position (absolute、fixed)
display為： inline-block、table-cell、flex
overflow 除了visible以外的值 (hidden、auto、scroll)
四、生成BFC能干些什么?
小編一般常用overflow,其他四大條件可根據(jù)情況進(jìn)行使用
解決margin重疊問題
解決浮動高度塌陷問題
解決侵占浮動元素的問題
那么我們帶著要解決三個問題，開始BFC演示
五、BFC的作用及原理
1. 自適應(yīng)兩欄布局
頁面：
根據(jù)BFC布局規(guī)則第3條：
每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
因此，雖然存在浮動的元素aslide，但main的左邊依然會與包含塊的左邊相接觸。
根據(jù)BFC布局規(guī)則第四條：
BFC的區(qū)域不會與float box重疊。BFC的區(qū)域不會與float box重疊。BFC的區(qū)域不會與float box重疊
我們可以通過通過觸發(fā)main生成BFC， 來實現(xiàn)自適應(yīng)兩欄布局。
.main {
overflow: hidden;
}
當(dāng)觸發(fā)main生成BFC后，這個新的BFC不會與浮動的aside重疊。因此會根據(jù)包含塊的寬度，和aside的寬度，自動變窄。
效果如下：
2. 自適應(yīng)兩欄布清除內(nèi)部浮動
代碼：
頁面：
根據(jù)BFC布局規(guī)則第六條：
計算BFC的高度時，浮動元素也參與計算
為達(dá)到清除內(nèi)部浮動，我們可以觸發(fā)par生成BFC，那么par在計算高度時，par內(nèi)部的浮動元素child也會參與計算。
代碼：
.par {
overflow: hidden;
}
效果如下：
3. 防止垂直 margin 重疊
代碼：
Haha
Hehe
頁面：
兩個p之間的距離為100px，發(fā)送了margin重疊。
根據(jù)BFC布局規(guī)則第二條：
Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊
我們可以在p外面包裹一層容器，并觸發(fā)該容器生成一個BFC。那么兩個P便不屬于同一個BFC，就不會發(fā)生margin重疊了。
代碼：
Haha
Hehe
效果如下：
五、總結(jié)
其實以上的幾個例子都體現(xiàn)了BFC布局規(guī)則第五條：
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
因為BFC內(nèi)部的元素和外部的元素絕對不會互相影響，因此， 當(dāng)BFC外部存在浮動時，它不應(yīng)該影響B(tài)FC內(nèi)部Box的布局，BFC會通過變窄，而不與浮動有重疊。同樣的，當(dāng)BFC內(nèi)部有浮動時，為了不影響外部元素的布局，BFC計算高度時會包括浮動的高度。避免margin重疊也是這樣的一個道理。
如果大家覺得我的文章寫的還不錯的話，就關(guān)注 點贊收藏一下哦！
還可以加我VX一起探討下前端問題
VX:dandanshen987
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/55030.html
摘要：根據(jù)布局規(guī)則第四條的區(qū)域不會與重疊。因此會根據(jù)包含塊的寬度，和的寬度，自動變窄。根據(jù)布局規(guī)則第二條垂直方向的距離由決定。同樣的，當(dāng)內(nèi)部有浮動時，為了不影響外部元素的布局，計算高度時會包括浮動的高度。避免重疊也是這樣的一個道理。 CFC 全稱：(Block Formatting Contexts)含義是塊級格式化上下文)，就是一個塊級元素的渲染顯示規(guī)則 一、簡易理解.定義 可以把 BF...
摘要：經(jīng)歷月份開放的簡歷，收到了蠻多詢問和面試，算是招人旺季，需要跳槽的小伙伴抓住機會?，F(xiàn)在是面試了家公司左右，有些高頻問題會標(biāo)記次數(shù)總次數(shù)，可供大家參考。最后祝大家面試順利，拿到心儀的，寫錯的地方請不吝賜教，謝謝。 經(jīng)歷 7月份開放的簡歷，收到了蠻多詢問和面試，算是招人旺季，需要跳槽的小伙伴抓住機會。一開始廣泛看面試題，沒抓住重點復(fù)習(xí)，有很多平時也沒怎么用到，導(dǎo)致一開始面試的時候，問的問題...
摘要：經(jīng)歷月份開放的簡歷，收到了蠻多詢問和面試，算是招人旺季，需要跳槽的小伙伴抓住機會?，F(xiàn)在是面試了家公司左右，有些高頻問題會標(biāo)記次數(shù)總次數(shù)，可供大家參考。最后祝大家面試順利，拿到心儀的，寫錯的地方請不吝賜教，謝謝。 經(jīng)歷 7月份開放的簡歷，收到了蠻多詢問和面試，算是招人旺季，需要跳槽的小伙伴抓住機會。一開始廣泛看面試題，沒抓住重點復(fù)習(xí)，有很多平時也沒怎么用到，導(dǎo)致一開始面試的時候，問的問題...
摘要：經(jīng)歷月份開放的簡歷，收到了蠻多詢問和面試，算是招人旺季，需要跳槽的小伙伴抓住機會?，F(xiàn)在是面試了家公司左右，有些高頻問題會標(biāo)記次數(shù)總次數(shù)，可供大家參考。最后祝大家面試順利，拿到心儀的，寫錯的地方請不吝賜教，謝謝。 經(jīng)歷 7月份開放的簡歷，收到了蠻多詢問和面試，算是招人旺季，需要跳槽的小伙伴抓住機會。一開始廣泛看面試題，沒抓住重點復(fù)習(xí)，有很多平時也沒怎么用到，導(dǎo)致一開始面試的時候，問的問題...
閱讀 1187·2021-09-22 15:43
閱讀 2381·2021-09-22 15:32
閱讀 4583·2021-09-22 15:11
閱讀 2272·2019-08-30 15:55
閱讀 2643·2019-08-30 15:54
閱讀 1012·2019-08-30 15:44
閱讀 1135·2019-08-29 13:26
閱讀 827·2019-08-29 12:54
