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阅读 212,383评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,522评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,852评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,621评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,741评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,929评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,076评论 3赞 410
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,803评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,265评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,582评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,716评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,395评论 4赞 333
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,039评论 3赞 316
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,798评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,027评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,488评论 2赞 361
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,612评论 2赞 350

BFC与多列布局

定义

规则

生成

实例

多列布局

推荐阅读更多精彩内容