BFC與多列布局

定義

BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與，它規定了內部的Block-level Box如何布局，并且與這個區域外部毫不相干。

規則

1:內部的box一行一行排列
2:屬于同一個BFC的兩個box在垂直方向的margin會發生重疊
3:每個元素的margin box的左邊，與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此
4:BFC區域與外部的float box不會發生重疊
5:BFC就是頁面上的一個隔離的獨立容器，容器內外的元素不會相互影響
6:在BFC內部的浮動元素也計算在BFC的寬度之內

生成

造成元素變成BFC布局的原因如下：
1:根元素
2:float不是none
3:position為absolute或者fixed
4:display:inline-block/table-cell/table-caption/flex/inline-flex
5:overflow不為visible

實例

對于BFC的規則，可以驗證如下：
1:內部的box一行一行排列
當我們在body下面聲明多個box的時候，box默認的就是一行一行排列的

<!DOCTYPE html>
<html>
<head>
    <title>BFC</title>
    <style type="text/css">
        .rule1{
            border: 1px solid red;
            margin: 10px;
            height: 20px;
        }
    </style>
</head>
<body>
<div class="rule1"></div>
<div class="rule1"></div>
</body>
</html>

結果如下：

rule1.png

2:屬于同一個BFC的兩個box在垂直方向的margin會發生重疊
針對上圖的例子，我們設置的margin是10px,如果沒有發生重疊，則兩個box之間的距離應該是20px

rule2.png

通過查看body的高度，發現是54px，即54=元素1高度(20)+元素2高度(20)+元素1邊框(2)+10+元素2邊框(2)。
此時可以看到中間的margin變成了10px

3:每個元素的margin box的左邊，與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此

<!DOCTYPE html>
<html>
<head>
    <title>BFC</title>
    <style type="text/css">
        .rule3-float-child{
            float: left;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
        .rule3-normal-child{
            background-color: red;
            height: 150px;
        }
    </style>
</head>
<body>
<div class="rule3-float-child"></div>
<div class="rule3-normal-child"></div>
</body>
</html>

rule3.png

當前float元素和普通元素都在root根元素下的BFC中，普通元素的左邊與root的左邊接觸，不受當前float元素的影響

4:BFC區域與外部的float box不會發生重疊
我們將樣例3中的普通元素單列為一個BFC的話，則會避開和float的重疊部分，如下：

<!DOCTYPE html>
<html>
<head>
    <title>BFC</title>
    <style type="text/css">
        .rule4-float-child{
            float: left;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
        .rule4-normal-child{
            background-color: red;
            height: 150px;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="rule4-float-child"></div>
<div class="rule4-normal-child"></div>
</body>
</html>

rule4.png

5:BFC就是頁面上的一個隔離的獨立容器，容器內外的元素不會相互影響
由例子4可知，內外內容互不影響

6:在BFC內部的浮動元素也計算在BFC的寬度之內

<!DOCTYPE html>
<html>
<head>
    <title>BFC</title>
    <style type="text/css">
        .container{
            border: 1px solid pink;
        }
        .child{
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
<div class="container">
<div class="child"></div>
<div class="child"></div>
</div>

</body>
</html>

當前container不是一個BFC，那么結果如下：

rule6-1.png

可以看到container的寬度沒有包括兩個child，然后我們給container加載BFC：

.container{overflow: hidden;}

然后變成如下結果：

rule6-2.png

多列布局

在平時的布局中，我們經常會碰到多列布局的需求，什么左側固定，右側自適應；兩側固定，中間自適應（圣杯布局或者雙飛翼布局），那我們就來簡單實現一下：
1:左側固定，右側自適應
其實這個前面已經實現了，我們來分析一下，左側固定，那就是固定寬度，右側自適應，那么寬度肯定不能設定。然后右側還不能和左側發生重疊，還必須靠著左側的div。那么左側靠邊，可以用float:left屬性，然后右側不與它重疊，那么就可以考慮BFC區域與外部的float box不會發生重疊這條規則。實現如下：

<!DOCTYPE html>
<html>
<head>
    <title>BFC</title>
    <style type="text/css">
        .left{
            float: left;
            height: 100px;
            width: 300px;
            background-color: green;
            line-height: 100px;
            text-align: center;
        }
        .right{
            overflow: hidden;
            height: 100px;
            background-color: blue;
            line-height: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="left">I am left</div>
<div class="right">I am right</div>
</body>
</html>

結果如下：

兩列布局-1.png

然后我們切換瀏覽器大小，發現左側的寬度始終不變，右側長度自適應變化。
然后假如右側不考慮BFC，如何實現呢？那么兩列的話左側可以考慮浮起來，然后右側正常的div占滿父親寬度，然后左側margin-left右移出left元素的寬度，如下：

<!DOCTYPE html>
<html>
<head>
    <title>BFC</title>
    <style type="text/css">
        .left{
            float:left;
            height: 100px;
            width: 300px;
            background-color: green;
            line-height: 100px;
            text-align: center;
        }
        .right{
            margin-left: 300px;
            height: 100px;
            background-color: blue;
            line-height: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="left">I am left</div>
<div class="right">I am right</div>
</body>
</html>

結果如下：

兩列布局-2.png

相比于右側使用BFC，當前這種操作，右側的元素設定與左側寬度有關。

2:右側固定，左側自適應
2.1:YY一下，和上面想法類似，右側float過去，然后左側div執行margin-right:100px, Code如下：

<!DOCTYPE html>
<html>
<head>
    <title>BFC</title>
    <style type="text/css">
        .left{
            height: 100px;
            background-color: green;
            line-height: 100px;
            text-align: center;
            overflow: hidden;
            margin-right: 100px;
        }
        .right{
            float: right;
            width: 100px;
            height: 100px;
            background-color: blue;
            line-height: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="left">I am left</div>
<div class="right">I am right</div>
</body>
</html>

執行一下，納尼？不行，為啥？好吧，我也不知道，把right那個元素放在前面，如下：

<body>
<div class="right">I am right</div>
<div class="left">I am left</div>
</body>

這樣就可以了，為啥要放在前面，我找了一下，沒搞明白，囧
然后有個問題，如果我們在最后加一個footer，如下：

<div class="right">I am right</div>
<div class="left">I am left</div>
<div style="height: 100px; background-color: red;">

然后我們的目標是在最下方顯示footer，但是如果直接這樣寫的話，效果如下：

兩列布局-3.png

此時我們的目標是在下方放置這個footer，然后的話，上面存在的原因是右側浮動的存在，所以對于上方兩個div添加父元素并清除浮動即可：

<div class="container">
    <div class="right">I am right</div>
    <div class="left">I am left</div>
    <div style="clear:both;"></div>
</div>
<div style="height: 100px; background-color: red;"></div>

兩列布局-4.png

2.2:既然雙列布局的時候如果采用浮動會出現元素順序逆反的情況，那么如果元素順序按照正常順序的時候如何實現雙列布局呢？
那么就對右側需要固定的位置使用絕對定位，然后左側直接margin-right即可：

<!DOCTYPE html>
<html>
<head>
    <title>BFC</title>
    <style type="text/css">
        .contailer{
            position: relative;
        }
        .left{
            height: 100px;
            background-color: green;
            line-height: 100px;
            text-align: center;
            overflow: hidden;
            margin-right: 100px;
        }
        .right{
            position: absolute;
            top:0;
            right: 0;
            width: 100px;
            height: 200px;
            background-color: blue;
            line-height: 100px;
            text-align: center;
        }
    </style>
</head>
<body style="margin:0;">
<div class="container">
    <div class="left">I am left</div>
    <div class="right">I am right</div>
</div>
<div style="height: 100px; background-color: red;">
</div>
</body>
</html>

同樣存在的問題就是right元素absolute之后，下面的footer就會被影響
2.3:如果又想元素順序正常，而且下方的元素不受上方的影響呢？
用absolute會影響布局，如果left執行float那么就沒有自適應寬度。但是如果不使用absolute和float，right會被擠到下一行（真糾結～）。那么left就用float和寬度100%，然后給right騰出需要的寬度。

<!DOCTYPE html>
<html>
<head>
    <title>BFC</title>
    <style type="text/css">
        .container{
            position: relative;
            overflow: hidden;
        }
        .left{
            float: left;
            width: 100%;
            height: 100px;
            margin-left: -100px;
            background-color: green;
            line-height: 100px;
            text-align: center;
        }
        .right{
            float: right;
            width: 100px;
            height: 200px;
            background-color: blue;
            line-height: 100px;
            text-align: center;
        }
    </style>
</head>
<body style="margin:0;">
<div class="container">
    <div class="left">I am left</div>
    <div class="right">I am right</div>
</div>
<div style="height: 100px; background-color: red;">
</div>
</body>
</html>

此時打開看到的效果如下：

兩列布局-6.png

發現left內容被擠到邊上去了，看不到了。好吧，那就在擠回來。

<!DOCTYPE html>
<html>
<head>
    <title>BFC</title>
    <style type="text/css">
        .container{
            position: relative;
            overflow: hidden;
        }

        .left_container{
            float: left;
            width: 100%;
            height: 100px;
            margin-left: -100px;
            background-color: green;
        }
        .left{
            margin-left: 100px;
        }
        .right{
            float: right;
            width: 100px;
            height: 200px;
            background-color: blue;
            line-height: 100px;
            text-align: center;
        }
    </style>
</head>
<body style="margin:0;">
<div class="container">
    <div class="left_container">
        <div class="left">I am left</div>
    </div>
    <div class="right">I am right</div>
</div>
<div style="height: 100px; background-color: red;">
</div>
</body>
</html>

兩列布局-7.png

現在看到left的值出現在了邊界。其實left用外面的父元素做了自適應布局，然后里面的在追回來就可以了。
2.4:標準瀏覽器
真是各種tric做法，新的W3C標準提供的新的display屬性可以很方便的實現需要的功能：給container設置table,100%，給左右元素設置table-cell，右側固定寬度，左側就會自動占滿：

<!DOCTYPE html>
<html>
<head>
    <title>BFC</title>
    <style type="text/css">
        .container{
            display: table;
            width: 100%;
        }
        .left{
            display: table-cell;
            background-color: green;
            height: 100px;
        }
        .right{
            display: table-cell;
            width: 100px;
            height: 150px;
            background-color: blue;
        }
    </style>
</head>
<body style="margin:0;">
<div class="container">
    <div class="left">I am left</div>
    <div class="right">I am right</div>
</div>
<div style="height: 100px; background-color: red;">
</div>
</body>
</html>

兩列布局-8.png

table-cell的話兩列的高度會以最高的為標準，所以才看到left的寬度也是150了。
3：三列布局，兩側固定，中間自適應（雙飛翼布局，圣杯布局）
3.1:W3C標準
根據上面的思想，對于比較先進的瀏覽器，可以用最新的W3C標準實現，此時比較簡單，但是兼容性比較差：

<!DOCTYPE html>
<html>
<head>
    <title>BFC</title>
    <style type="text/css">
        .container{
            display: table;
            width: 100%;
        }
        .left{
            display: table-cell;
            background-color: green;
            width: 100px;
            height: 100px;
        }
        .middle{
            display: table-cell;
            background-color: red;
            height: 300px;
        }
        .right{
            display: table-cell;
            background-color: blue;
            width: 100px;
            height: 150px;
        }
    </style>
</head>
<body style="margin:0;">
<div class="container">
    <div class="left">I am left</div>
    <div class="middle">I am middle</div>
    <div class="right">I am right</div>
</div>
<div style="height: 100px; background-color: yellow;"></div>
</body>
</html>

效果如下：

三列布局-1.png

3.2:左右float，中間不動
想一想，中間自適應，兩邊寬度固定，那么一種思路就是中間寬度占滿，然后兩邊各自margin對應的寬度，即給左右元素讓出位置。
直接給左右元素加上向左向右的浮動之后，發現右邊的元素在下面不能浮上來，一種方法就是給right元素設定絕對定位（隨你定位??）：

<!DOCTYPE html>
<html>
<head>
    <title>BFC</title>
    <style type="text/css">
        .container{
            position: relative;
        }
        .left{
            background-color: green;
            width: 100px;
            height: 100px;
            float: left;
        }
        .middle{
            background-color: red;
            height: 300px;
            margin:0 100px;
        }
        .right{
            background-color: blue;
            width: 100px;
            height: 150px;
            float: right;
            position: absolute;
            top:0;
            right: 0;
        }
    </style>
</head>
<body style="margin:0;">
<div class="container">
    <div class="left">I am left</div>
    <div class="middle">I am middle</div>
    <div class="right">I am right</div>
</div>
<div style="height: 100px; background-color: yellow;"></div>
</body>
</html>

三列布局-2.png

用絕對定位太絕對了，哈哈。換一種，如果right元素float:right的時候，此時如果元素排序如下：

<div class="container">
    <div class="left">I am left</div>
    <div class="middle">I am middle</div>
    <div class="right">I am right</div>
</div>

那么float會被middle排擠到下一行（當“非float的元素”和“float的元素”在一起的時候,如果非float元素在先,那么float的元素將受到排斥）。那么另一種方式就是將float放在middle元素前面，如下：

<div class="container">
    <div class="left">I am left</div>
    <div class="right">I am right</div>
    <div class="middle">I am middle</div>
</div>

此時布局就正常了。
3.3: 都用float，首先顯示中間內容

<!DOCTYPE html>
<html>
<head>
    <title>BFC</title>
    <style type="text/css">
        .container{
            position: relative;
            overflow: hidden;
            padding: 0 200px;
        }
        .middle{
            width: 100%;
            height: 200px;
            background-color: deeppink;
            float: left;
        }
        .left{
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
            margin-left:-100%;
            position: relative;
            left:-200px;
        }
        .right{
            width: 200px;
            height: 200px;
            background-color: darkorchid;
            float: left;
            margin-left: -200px;
            position: relative;
            right: -200px;
        }
    </style>
</head>
<body style="margin:0;">
<div class="container">
    <div class="middle">I am middle</div>
    <div class="left">I am left</div>
    <div class="right">I am right</div>
</div>
<div style="height: 100px; background-color: yellow;"></div>
</body>
</html>

實現原理是，當都采用float的時候，元素從左到右排列。當middle占據了100%的寬度，讓left的margin-left:-100%回退一行到行首。right回退自身寬度即可回到第一行。此時middle的內容唄左右覆蓋，然后container首先padding出左右需要的寬度，然后再把左右元素通過相對定位移動過去。

三列布局-3.png

3.3.1:中間內容嵌套外層元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>雙飛翼布局</title>
<style type="text/css">
    .container{

    }
    .middle{
        float: left;
        width: 100%;
    }
    .middle-inner{
        margin:0 100px;
        background-color: red;
        height: 100px;
    }
    .left{
        float: left;
        margin-left: -100%;
        background-color: blue;
        height: 100px;
        width: 100px;
    }
    .right{
        float: left;
        margin-left: -100px;
        height: 100px;
        width: 100px;
        background-color: green;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="middle">
            <div class="middle-inner">middle</div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

此時middle元素還是100%的占比，內部子元素左右推出對應的寬度顯示內容。

最后編輯于：2017.12.09 21:16:39

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 228,505評論 6贊 533
死咒
序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
沈念sama閱讀 98,556評論 3贊 418
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事?！?“怎么了？”我有些...
開封第一講書人閱讀 176,463評論 0贊 376
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經常有香客問我，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 63,009評論 1贊 312
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
茶點故事閱讀 71,778評論 6贊 410
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發上，一...
開封第一講書人閱讀 55,218評論 1贊 324
城市分裂傳說
那天，我揣著相機與錄音，去河邊找鬼。笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 43,281評論 3贊 441
雙鴛鴦連環套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 42,436評論 0贊 288
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
沈念sama閱讀 48,969評論 1贊 335
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 40,795評論 3贊 354
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 42,993評論 1贊 369
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 38,537評論 5贊 359
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
茶點故事閱讀 44,229評論 3贊 347
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 34,659評論 0贊 26
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 35,917評論 1贊 286
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個月前我還...
沈念sama閱讀 51,687評論 3贊 392
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 47,990評論 2贊 374

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

BFC與多列布局

BFC與多列布局

定義

規則

生成

實例

多列布局

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

BFC與多列布局

定義

規則

生成

實例

多列布局

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频