目录
一、常见定位方案
（1）普通流
元素按照其在html的先后位置由上而下布局。
（2）浮动布局（float）
元素先按照普通流的位置出现，然后根据浮动方向尽可能的向左或向右偏移。
（3）绝对定位（absolute）
在绝对定位布局中，元素会脱离文档流。
二、BFC概念
BFC块级格式上下文，属于定位方案中的普通流。
具有BFC特性的元素可以看作是隔了的独立容器，容器里的元素不会在布局上影响到外面的元素。简单的说：可以理解BFC是要给封闭的大箱子，箱子内的元素无论如何交换，都不会影响到外面的元素。
三、BFC触发条件以及规则
1、body根元素；
2、浮动元素float的值不为none；
3、绝对定位元素：positon（absolute、fixed）；
4、display的值为：display（block、inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid）；
5、overflow：除了visible以外的值；（hidden、scroll、auto）；
四、应用场景
利用BFC的特性，我们将BFC应用在以下场景：
防止margin重叠（塌陷）
<style>
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p>Haha</p >
<p>Hehe</p >
</body>
页面显示如下：
两个p元素之间的距离为100px，发生了margin重叠（塌陷），以最大的为准，如果第一个P的margin为80的话，两个P之间的距离还是100，以最大的为准。
前面讲到，同一个BFC的俩个相邻的盒子的margin会发生重叠
可以在p外面包裹一层容器，并触发这个容器生成一个BFC，那么两个p就不属于同一个BFC，则不会出现margin重叠
<style>
.wrap {
overflow: hidden;// 新的BFC
}
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p>Haha</p >
<div class="wrap">
<p>Hehe</p >
</div>
</body>
这时候，边距则不会重叠：
清除内部浮动
<style>
.par {
border: 5px solid #fcc;
width: 300px;
}
.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
页面显示如下：
而BFC在计算高度时，浮动元素也会参与，所以我们可以触发.par元素生活才能BFC，则内部浮动元素计算高度时候也会计算
.par {
overflow: hidden;
}
实现效果如下：
自适应多栏布局
这里举个两栏的布局
<style>
body {
width: 300px;
position: relative;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.main {
height: 200px;
background: #fcc;
}
</style>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
效果图如下：
前面讲到，每个元素的左外边距与包含块的左边界相接触
因此，虽然.aslide为浮动元素，但是main的左边依然会与包含块的左边相接触
而BFC的区域不会与浮动盒子重叠
所以我们可以通过触发main生成BFC，以此适应两栏布局
.main {
overflow: hidden;
}
这时候，新的BFC不会与浮动的.aside元素重叠。因此会根据包含块的宽度，和.aside的宽度，自动变窄
效果如下：
小结
可以看到上面几个案例，都体现了BFC实际就是页面一个独立的容器，里面的子元素不影响外面的元素。
633
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
