理解BFC以及BFC相關布局問題解決

atinosun 發布于2019-08-01 18:39 / 545人閱讀

寫頁面時會遇到：

子元素float父元素的高度不會撐開;

在布局時，box1and box2,其中box1 float：left，這是box2會在box1下面，(如果文字過多就會形成文字環繞效果)，但我就是想要box2在box1的右側;

又或是上下兩個box的margin重疊。

這些問題除了其他一些方法解決外，都可以利用加上overflow:hidden，但是why?其實 BFC的作用呢。
BFC??啥？
BFC這個詞....

BFC：全稱box formatting context;即塊格式上下文，block-level元素參與；

那么什么是block-level呢？
等等等等...
"W3C" CSS2.1規范：
Block-level elements?are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the?"display"property make an element block-level: "block", "list-item", and "table".
塊級元素是源文檔中被視為塊（例如段落）可視化格式的那些元素。 "display"屬性的以下值構成一個塊級別："block"，"list-item"和"table"。

那它是怎么形成的呢？

以下情況之一：

float值不為none

position:fixed / absolute

display:table-cell / table-caption /inline-block / flex / inline-flex.

overflow屬性不為visible

我們知道了什么是BFC,如何形成BFC，接下來就要說BFC的布局規則啦
滴滴滴...

內部的box會一個接一個地垂直布局。

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

每個盒子的左外邊框緊挨著左邊框的包含塊(從左往右的格式化時，否則相反)。即使存在浮動也是如此

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

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

計算BFC的高度時，浮動元素也參與計算.

該知道的理論也差不多了，該解答了~
問題1：子元素float父元素的高度不會撐開

 
        
        我是left
        我是right

效果：

我們看到container只是right的高，而left中float使該元素脫離了文檔流它的高沒有計算在內，現在要想left的高度計算在內，根據BFC布局規則6就可以，形成一個BFC區不就可以計算float的高度嘍，來，上碼：

.container{
                color:#FFF;
                width: 300px;
                margin:100px auto;
                border:1px solid #330033;
                overflow: hidden;
            }

果真嘿，其實，這里不止加overflow：hidden,加上邊介紹任何一種可以形成BFC區奏行，比如：overflow: auto; / float: left; /display: flex;等等，根據項目中的實際需求。

2.問題2：box2在box1右側
在問題1里的代碼基礎上，把right區增加一個高度比如300px，就可以看到效果liu

           .right{
                background: #FFCCFF;
                height: 300px;
                overflow: hidden;
            }

由于left塊float的原因，導致right在left下面，解決此問題
根據BFC布局規則4 ：BFC的區域不會與float box重疊，那么right形成BFC區
效果：

哇，好了呀！

問題3：magin重疊問題

   
        
        我是box1
        我是box2

我們大多以為是80px，可結果卻是50px!
why?
BFC原則2指明了同一個BFC區的margin垂直重疊，不在同一個是不是就不重疊了，來來來

        ...
        .wrapper{
               overflow:hidden;
          }  
        ...
        
             我是box1
               
        
        我是box2

ok!通過給box1或box2添加一個父元素形成和另一個不在同一區。

關于垂直margin折疊

兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值;

兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值;

兩個外邊距一正一負時，折疊結果是兩者的相加的和;

最后的最后，歡迎指正~

GPU云服務器云服務器 bfc布局 bfc 布局問題 datahub相關問題

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

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

理解 CSS 布局和 BFC

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

miya 2019-08-30 15:43 評論0 收藏0
談談BFC與ie特有屬性hasLayout

摘要：當一個內聯元素想獲得就要使用這個屬性。下因為導致的浮動元素與普通元素之間產生代碼如下我是浮動元素我是后面的文字，用來測試的正常情況下解決方式加一個的不只是文字，的浮動元素也會和內聯元素產生的值。設置屬性的元素不和任何元素發生合并。發現我好久沒更新博文了=-=這里把我之前在博客園寫過的一篇關于BFC的文章粘貼過來，順便自己也再次做個總結。最近看了一篇總結ie常見bug的文章，里面提...

CodeSheep 2019-08-30 12:51 評論0 收藏0
談談BFC與ie特有屬性hasLayout

摘要：當一個內聯元素想獲得就要使用這個屬性。下因為導致的浮動元素與普通元素之間產生代碼如下我是浮動元素我是后面的文字，用來測試的正常情況下解決方式加一個的不只是文字，的浮動元素也會和內聯元素產生的值。設置屬性的元素不和任何元素發生合并。發現我好久沒更新博文了=-=這里把我之前在博客園寫過的一篇關于BFC的文章粘貼過來，順便自己也再次做個總結。最近看了一篇總結ie常見bug的文章，里面提...

iliyaku 2019-08-01 15:08 評論0 收藏0
CSS: 潛藏著的BFC

摘要：而就潛藏在其中，當你修改樣式時，一不小心就能觸發它而毫無察覺，因此沒有意識到的神奇之處。實例解決侵占浮動元素的問題我們知道浮動元素會脫離文檔流，然后浮蓋在文檔流元素上。在寫樣式時，往往是添加了一個樣式，又或者是修改了某個屬性，就達到了我們的預期。而BFC就潛藏在其中，當你修改樣式時，一不小心就能觸發它而毫無察覺，因此沒有意識到BFC的神奇之處。一、什么是BFC（Block Form...

learn_shifeng 2019-08-29 13:54 評論0 收藏0