BFC與多列布局

定義

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

規(guī)則

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

生成

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

實例

對于BFC的規(guī)則住册，可以驗證如下：
1:內(nèi)部的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>

結(jié)果如下：

rule1.png

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

rule2.png

通過查看body的高度拍谐，發(fā)現(xiàn)是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區(qū)域與外部的float box不會發(fā)生重疊
我們將樣例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就是頁面上的一個隔離的獨立容器启上，容器內(nèi)外的元素不會相互影響
由例子4可知，內(nèi)外內(nèi)容互不影響

6:在BFC內(nèi)部的浮動元素也計算在BFC的寬度之內(nèi)

<!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店印，那么結(jié)果如下：

rule6-1.png

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

.container{overflow: hidden;}

然后變成如下結(jié)果：

rule6-2.png

多列布局

在平時的布局中，我們經(jīng)常會碰到多列布局的需求按摘，什么左側(cè)固定包券，右側(cè)自適應；兩側(cè)固定院峡，中間自適應（圣杯布局或者雙飛翼布局）兴使，那我們就來簡單實現(xiàn)一下：
1:左側(cè)固定，右側(cè)自適應
其實這個前面已經(jīng)實現(xiàn)了照激，我們來分析一下，左側(cè)固定盹牧，那就是固定寬度俩垃，右側(cè)自適應，那么寬度肯定不能設定汰寓。然后右側(cè)還不能和左側(cè)發(fā)生重疊口柳，還必須靠著左側(cè)的div。那么左側(cè)靠邊有滑，可以用float:left屬性跃闹，然后右側(cè)不與它重疊，那么就可以考慮BFC區(qū)域與外部的float box不會發(fā)生重疊這條規(guī)則毛好。實現(xiàn)如下：

<!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>

結(jié)果如下：

兩列布局-1.png

然后我們切換瀏覽器大小望艺，發(fā)現(xiàn)左側(cè)的寬度始終不變，右側(cè)長度自適應變化肌访。
然后假如右側(cè)不考慮BFC找默，如何實現(xiàn)呢？那么兩列的話左側(cè)可以考慮浮起來吼驶，然后右側(cè)正常的div占滿父親寬度惩激，然后左側(cè)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>

結(jié)果如下：

兩列布局-2.png

相比于右側(cè)使用BFC，當前這種操作风钻，右側(cè)的元素設定與左側(cè)寬度有關顷蟀。

2:右側(cè)固定，左側(cè)自適應
2.1:YY一下骡技，和上面想法類似鸣个，右側(cè)float過去，然后左側(cè)div執(zhí)行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>

執(zhí)行一下哮兰，納尼毛萌？不行，為啥喝滞？好吧阁将，我也不知道，把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让腹，然后的話远剩，上面存在的原因是右側(cè)浮動的存在，所以對于上方兩個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:既然雙列布局的時候如果采用浮動會出現(xiàn)元素順序逆反的情況骇窍，那么如果元素順序按照正常順序的時候如何實現(xiàn)雙列布局呢瓜晤？
那么就對右側(cè)需要固定的位置使用絕對定位，然后左側(cè)直接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執(zhí)行float那么就沒有自適應寬度足画。但是如果不使用absolute和float，right會被擠到下一行（真糾結(jié)～）蛔钙。那么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

發(fā)現(xiàn)left內(nèi)容被擠到邊上去了吁脱，看不到了桑涎。好吧彬向，那就在擠回來。

<!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

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

<!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：三列布局州泊，兩側(cè)固定丧蘸，中間自適應（雙飛翼布局，圣杯布局）
3.1:W3C標準
根據(jù)上面的思想遥皂，對于比較先進的瀏覽器力喷，可以用最新的W3C標準實現(xiàn)，此時比較簡單演训，但是兼容性比較差：

<!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對應的寬度窟她，即給左右元素讓出位置没讲。
直接給左右元素加上向左向右的浮動之后，發(fā)現(xiàn)右邊的元素在下面不能浮上來礁苗，一種方法就是給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穿剖，首先顯示中間內(nèi)容

<!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>

實現(xiàn)原理是蚤蔓，當都采用float的時候，元素從左到右排列糊余。當middle占據(jù)了100%的寬度秀又，讓left的margin-left:-100%回退一行到行首单寂。right回退自身寬度即可回到第一行。此時middle的內(nèi)容唄左右覆蓋吐辙，然后container首先padding出左右需要的寬度宣决，然后再把左右元素通過相對定位移動過去。

三列布局-3.png

3.3.1:中間內(nèi)容嵌套外層元素

<!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%的占比昏苏，內(nèi)部子元素左右推出對應的寬度顯示內(nèi)容尊沸。

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市贤惯，隨后出現(xiàn)的幾起案子洼专，更是在濱河造成了極大的恐慌，老刑警劉巖孵构，帶你破解...
沈念sama閱讀 218,122評論 6贊 505
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件屁商，死亡現(xiàn)場離奇詭異，居然都是意外死亡浦译，警方通過查閱死者的電腦和手機棒假，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,070評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來精盅，“玉大人帽哑，你說我怎么就攤上這事√厩危” “怎么了妻枕？”我有些...
開封第一講書人閱讀 164,491評論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長粘驰。經(jīng)常有香客問我屡谐，道長，這世上最難降的妖魔是什么蝌数？我笑而不...
開封第一講書人閱讀 58,636評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任愕掏，我火速辦了婚禮，結(jié)果婚禮上顶伞，老公的妹妹穿的比我還像新娘饵撑。我一直安慰自己，他們只是感情好唆貌，可當我...
茶點故事閱讀 67,676評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布滑潘。她就那樣靜靜地躺著，像睡著了一般锨咙。火紅的嫁衣襯著肌膚如雪语卤。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,541評論 1贊 305
城市分裂傳說
那天，我揣著相機與錄音粹舵，去河邊找鬼钮孵。笑死，一個胖子當著我的面吹牛齐婴，可吹牛的內(nèi)容都是我干的油猫。我是一名探鬼主播，決...
沈念sama閱讀 40,292評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼柠偶，長吁一口氣：“原來是場噩夢啊……” “哼情妖！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起诱担，我...
開封第一講書人閱讀 39,211評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤毡证，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后蔫仙，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體料睛，經(jīng)...
沈念sama閱讀 45,655評論 1贊 314
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,846評論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年摇邦，在試婚紗的時候發(fā)現(xiàn)自己被綠了恤煞。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 39,965評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡施籍，死狀恐怖居扒，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情丑慎，我是刑警寧澤喜喂，帶...
沈念sama閱讀 35,684評論 5贊 347
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站竿裂，受9級特大地震影響玉吁，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜腻异，卻給世界環(huán)境...
茶點故事閱讀 41,295評論 3贊 329
男人毒藥：我在死后第九天來索命
文/蒙蒙一进副、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧悔常，春花似錦敢会、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,894評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽塞俱。三九已至姐帚，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間障涯，已是汗流浹背罐旗。一陣腳步聲響...
開封第一講書人閱讀 33,012評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工膳汪，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人九秀。一個月前我還...
沈念sama閱讀 48,126評論 3贊 370
代替公主和親
正文我出身青樓遗嗽，卻偏偏與公主長得像，于是被迫代替她去往敵國和親鼓蜒。傳聞我的和親對象是個殘疾皇子痹换，可洞房花燭夜當晚...
茶點故事閱讀 44,914評論 2贊 355

BFC與多列布局

定義

規(guī)則

生成

實例

多列布局

推薦閱讀更多精彩內(nèi)容