BFC与多列布局

作者: Arno_z | 来源:发表于2017-08-05 13:38 被阅读0次

多列布局思路
BFC与多列布局
页面架构
面试题
CSS进阶(二)
CSS3开发常用核心技能
关于CSS的BFC
html 和css
CSS中的BFC
一文搞懂CSS中的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%的占比，内部子元素左右推出对应的宽度显示内容。