我對BFC的理解

時間 2019-11-17

標籤 bfc 理解简体版

原文原文鏈接

背景：接觸到BFC源於寫佈局時遇到的一個坑。原本是想將一個綠色div包含在一個紅色div中，margin爲30px,代碼以下

 1 <html>
 2 <head>
 3 <style type="text/css">
 4     .main{
 5         height:500px;
 6         background-color:red;
 7     }
 8     .content{
 9         margin:30px;
10         height:300px;
11         background-color:green;
12     }
13 </style>
14 </head>
15 <body>
16 <div class="main">
17     <div class="content"></div>
18 </div>
19 </body>
20 </html>

代碼咋看起來沒錯吧，我也以爲沒錯，不就是在裏面那個div上面加一個margin嘛。可是結果是這樣的

爲何margin到了.main div上面了，我想了好久，找不到緣由，決定再看看書。結果讓我想抽本身

當一個元素包含於另外一個元素中時（假設沒有padding或border把margin分隔開），他們的上/下margin會發生合併

so .main div的上margin跟.content div的上margin合併了，所以margin出如今了.main div上面

怎麼解決？

感謝大師兄及時到來，爲我解決疑惑。給.main div加一個overflow屬性，屬性值設爲hidden

<style type="text/css">
    .main{
        height:500px;
        background-color:red;
        overflow: hidden;
    }
    .content{
        margin:30px;
        height:300px;
        background-color:green;
    }
</style>

頁面就正常了，是我想要的了css

這下正常了吧，立馬追問大師兄爲何設了一個overflow屬性就好使了呢，大師兄就告訴了我 BFC這個神奇的東西。

BFC是什麼？

BFC(Block formatting context)直譯爲「塊級格式化上下文」。我把他理解爲一個獨立開來的一個區域，他決定他內部的塊級Box怎麼佈局，而且與外部絕不相干。

根據w3c對BFC的描述，大概有如下幾點規則：

在建立了BFC的元素中，其子元素按文檔流一個接一個的放置。
在BFC中，每個元素的左邊緣與包含塊的左邊相接觸（對於從右往左的格式化，右邊緣接觸右邊），即便發生浮動也是如此（只不過會因爲浮動而壓縮），除非這個元素建立了一個新的BFC。
建立了BFC的元素不能與浮動元素重疊
計算BFC的高度時須要計算浮動元素的高度
BFC就是頁面上的一個獨立的容器，容器內的元素不影響外部元素。外部元素也不會影響容器內部元素

那怎麼產生BFC呢？

float的值不爲none
overflow的值不爲visible
display的值爲table-cell,table-caption,inline-block中的任何一個
position的值不爲relative和static

當一個html元素知足下面條件中的任何一點時，均可以產生BFChtml

1、就好比說以前那個栗子，爲何設置了overflow屬性爲hidden以後margin就是相對於.main div了呢？由於.main div這時候是一個BFC，與外部元素無關，因此內部包含的div上的margin只能是相對於.main div

二、再舉個栗子：自適應兩欄佈局

<html>
<head>
<style type="text/css">
    .main{
        float:left;
        background-color:red;
        width: 200px;
        height:100px;
    }
    .content{
        background-color:green;
        height:200px;
    }
</style>
</head>
<body>
    <div class="main"></div>
    <div class="content"></div>
</body>
</html>

頁面：佈局

根據第3條規則，很清楚就能夠知道，只要讓.content div也成爲一個BFC就能夠了吧，so,在.content的css中加上overflow:hidden這條語句就ok了。

<style type="text/css">
    .main{
        float:left;
        background-color:red;
        width: 200px;
        height:100px;
    }
    .content{
        overflow:hidden;
        background-color:green;
        height:200px;
    }
</style>

頁面就變成這樣了spa

perfect！！！3d

三、還有一個栗子，清除內部浮動

<html>
<head>
<style type="text/css">
    .main{
        border: 5px solid green;
        width: 300px;
    }
    .child{
        float:left;
        width:100px;
        height:100px;
        border: 5px solid #f66;
    }
</style>
</head>
<body>
<div class="main">
    <div class="child"></div>
    <div class="child"></div>
</div>
</body>
</html>

頁面：code

由於.main div的高度沒有計算浮動元素的高度，因此.main div高度沒有撐開。根據第5條原則，只須要把.main div觸發BFC就行了

<style type="text/css">
    .main{
        overflow:hidden;
        border: 5px solid green;
        width: 300px;
    }
    .child{
        float:left;
        width:100px;
        height:100px;
        border: 5px solid #f66;
    }
</style>

頁面orm

總之就是記住一句話，BFC是一個獨立的容器

小子可能理解的不全，可能理解的有誤差，但願各位前輩多多指教htm

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。