您的位置：首页 > 其它

浅谈BFC与应用

2016-06-01 19:11 441 查看

什么是BFC

BFC(Block formatting context)的中文翻译我们一般叫做块级格式化上下文。它是一个独立渲染的区域，规定了内部如何布局，同时不受外界的影响。我们的根元素本身就是一个BFC

BFC的特性

BFC的特性有很多，但是这里主要说到四点，也是我们常用的。

BFC内部的margin会发生折叠，即是我们常说的margin collasping。

BFC内部的浮动元素也参与高度计算，我们常利用此点解决高度塌陷的问题。

BFC的区域不会与float box重叠，我们可以利用这点来做到自适应两栏布局。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

怎么生成一个BFC

根元素。因为根元素本身就是一个BFC

设置

float

属性

position

为

absolute

或者

fixed

overflow

不为

visible

,一般而言我们都是设为

hidden

display

为inline-block, table-cell, table-caption, flex, inline-flex

BFC的用处或者解释

1. 边距折叠问题

前面我们说过，根元素本身就是一个BFC，所以我们经常提到的边距折叠，即是垂直方向上margin不会相加，而是选择较大的一个值作为margin，就像这个例子

<div style="width:200px;height: 200px;background-color: red;margin-bottom: 10px;"></div>
<div style="width:200px;height: 200px;background-color: green;margin-top: 20px;"></div>

看到上面的结果我十分感动啊，实在是没想到markdown真的能直接编译代码，那这样我以后还截个毛图，有代码直接在这里做实验行了。

说回正题，这里我们的上下边距是20px的而不是20+10=30px。这就是因为我们上文提到的BFC内部的正常块级元素（注意是正常）会发生垂直边距折叠。但是有时候我们不需要这种边距折叠，有没有什么办法去掉吗？这就需要用到我们上面提过的另一个特性

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

意思很明确了，所以我们要想避免这种折叠那么我们就可以新建一个BFC，也就是这样

<div style="overflow: hidden">
<div style="width:200px;height: 200px;background-color: red;margin-bottom: 10px;overflow:hidden"></div>
</div>
<div style="width:200px;height: 200px;background-color: green;margin-top: 20px;overflow:hidden"></div>

由于外部的盒子设了

overflow:hidden

，所以这个时候新建了一个BFC，而因为BFC里外是不能互相影响的，所以margin就无法折叠。

2.解决高度塌陷

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

.par { border: 5px solid #fcc; width: 300px; } .child { border: 5px solid #f66; width:100px; height: 100px; float: left; }

从效果中我们可以看出，父盒子此时并没有高度，因为正常情况下就算高度是不会把浮动元素也算进去的，但是很多时候我们为了达到高度自适应，不能手动给父元素定高而是应该让子元素撑起来，所以面对这种情况我们就可以用到BFC的这一特性

BFC内部的浮动元素也参与高度计算，我们常利用此点解决高度塌陷的问题。

所以这里我们只需要给父元素加一个

overflow:hidden

使父元素变成BFC便可。

3.两栏自适应布局

<style>
.wrap{
width: 800px;
height:200px;
}

.aside {
width: 300px;
height: 150px;
float: left;
background: #f66;
}

.main {
height: 200px;
background: #fcc;
}
</style>
<div class="wrap">
<div class="aside"></div>
<div class="main"></div>
</div>

.wrap{ width: 800px; height:200px; } .aside { width: 300px; height: 150px; float: left; background: #f66; } .main { height: 200px; background: #fcc; }

对于这段代码出来的效果应该没什么问题，我们把aside浮动了，而main的宽度随着wrap变化，所以此时aside浮在main上面。

BFC的区域不会与float box重叠，我们可以利用这点来做到自适应两栏布局。

我们利用这个特点，把我们的main元素变成BFC，这样它就不会与我们的浮动元素进行重叠，然后我们便实现了一个两栏自适应布局的效果。

<style>
.wrap{
width: 800px;
height:200px;
}

.aside {
width: 300px;
height: 150px;
float: left;
background: #f66;
}

.main {
height: 200px;
background: #fcc;
}
.main{
overflow:hidden;
}
</style>
<div class="wrap">
<div class="aside"></div>
<div class="main"></div>
</div>

当然，对于两栏自适应布局，除了采用BFC之外，我之前还写过一篇文章说过两栏自适应布局，那种方式就做圣杯布局的方法。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航