簡述下什麼是bfc，觸發bfc的條件有哪些

1樓：匿名

一、bfc的概念。

1.規範解釋。

塊格式化上下文（block formatting context，bfc）是web頁面的視覺化css渲染的一部分，是佈局過程中生成塊級盒子的區域，也是浮動元素與其他元素的互動限定區域。

2.通俗理解。

bfc是乙個獨立的佈局環境，可以理解為乙個容器，在這個容器中按照一定規則進行物品擺放，並且不會影響其它環境中的物品。

如果乙個元素符合觸發bfc的條件，則bfc中的元素佈局不受外部影響。

浮動元素會建立bfc，則浮動元素內部子元素主要受該浮動元素影響，所以兩個浮動元素之間是互不影響的。

2樓：匿名使用者

在乙個bfc中，垂直方向上，盒子是從包含塊頂部開始乙個挨著乙個佈局的，兩個相鄰的盒子的垂直距離是由margin屬性決定的，在乙個bfc中的兩個相鄰的塊級盒子的垂直外邊距會產生塌陷。

在乙個bfc中，水平方向上，每個盒子的左邊緣都會接觸包含塊的左邊緣（從右向左的格式則相反）。除非出現浮動元素和其他元素相互作用的情況（當有浮動元素時，行盒可能因浮動元素而收縮，如果有盒子形成了新的bfc，那這個盒子也可能因浮動元素而變窄）。

為什麼會有bfc？bfc是什麼？如何觸發？bfc解決了什麼問題？

3樓：機器

前端程式設計師在佈局頁面時，經常會遇到各種煩人的小問題，比如：每個元素都是乙個盒子，盒子外的父元素應該不會受到盒內子的子元素影響，可是事實是這樣的嗎？

往往，我們會看到子元素亂銀浮動後，父元素高度沒有了，兩欄佈局時右側沒有自適應，垂直方向上上下兩個元素外邊距不太對。

從常理上來說，被包含在父元素裡的元素是不會影響到父元素旁邊的元素，但實際上並不總是如此，那麼有沒有什麼辦法能讓裡面的元素和外部真正隔離開呢？

解決辦法就是：bfc

bfc = block formatting context 意思是「塊級格式化上下文」，w3c的解釋是：它決定了元素如何對其內容進行定位，以及與其他元素的關係和相互作用，當涉及到視覺化佈局的時候，bfc提供了乙個環譁族宴境，html元素在這個環境中按照一定規則進行佈局。

其實，我們只要記住：bfc的目的就是：形成乙個完全獨立的空間，讓空間中的子元素不會影響到外面的佈局。

如何才能形成這樣乙個神奇的空間呢？我們通過css為元素設定一些屬性，就能觸發，常用的有四種：

在知道觸發規則之後，我們再來看下能解決什麼問題呢？

觸發了bfc的容器就是頁面上的乙個完全隔離開的容器，容器裡的子元素絕對不會影響到外面的元素，為了保證這個規則，觸發了bfc的父元素在計算高度時，不得不讓浮動的子元素也參與進來，變相的實現了清楚內部浮動的目的。

但有的時候出於佈局需要也可能無法給父元素設定這些屬穗數性，解決高度坍塌還有讓父元素也浮動起來，或新增乙個高度，但這種適用於已知道子元素高度。

垂直方向上兩個兄弟元素外邊距會取最大值，而不是取和，那麼我們可以通過觸發bfc來防止他們之間相互影響。為其中乙個元素的外邊包裹一層父元素，並且觸發父元素bfc，比如：overflow：

hidden，這樣打破原有格局，就不再會重疊啦！

另外我們可以用padding來代替marging，有點是簡單易懂，缺點是如果根據設計本來就需要設定padding樣式，那就沒辦法用了。