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%的占比，内部子元素左右推出对应的宽度显示内容。
77
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
