css学习专题-BFC

文章目录

BFC:Block Formatting Context.

BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 containing block 顶部起一个接一个垂直排列,水平方向上撑满整个宽度 (除非内部的盒子自己内部建立了新的 BFC)。 developer center上面有对BFC的一段描述:

一个 block formatting context 是web页面可视化CSS渲染的一个部分,是一块 block boxes 排布以及 float 元素相互作用的区域。

可以理解为一个作用范围,在一个BFC里的布局与其之外的布局不相关或者说不相互影响。有一个形象的例子可作参考:

把一个页面想象成大的集装箱,这个集装箱里装的货物就是html元素。在现实生活中为了避免不同人的货物相互混淆,都是把 货物打好包装再装入集装箱,这样的话无论你包装里面的货物怎么摆放,都不会影响到其他人的货物。那么这个包装就可以被想象成Block Formatting Context。

如何创建BFC

当一个HTML元素满足下面条件的任何一点,都可以产生Block Formatting Context:

  • float的值不为”none”
  • overflow的值不为”visible”
  • display的值为 “table-cell”, “table-caption”, or “inline-block”中的任何一个
  • position的值不为 “static” 或 “relative”中的任何一个

我是一个使用浮动布局的孩子来的。今天才知道了这种原来也有可以不用清除浮动来布局,只要对BFC这个概念清晰明了,完全可以不用清除浮动来布局了。

以前的误解

1.折叠margin

以前总是认为,相邻两个盒子放在一起,他们的margin会重叠,取值为最大的一个作为他们之间的margin值

下面我在一篇文章里面彻底了解了折叠margin产生的原因了。

这些margin都处于普通流中,并在同一个BFC中;
这些margin没有被非空内容、padding、border 或 clear 分隔开;
这些margin在垂直方向上是毗邻的,包括以下几种情况:

  1. 一个box的top margin与第一个子box的top margin
  2. 一个box的bottom margin与最后一个子box的bottom margin,但须在该box的height为auto的情况下
  3. 一个box的bottom margin与紧接着的下一个box的top margin
  4. 一个box的top margin与其自身的bottom margin,但须满足没创建BFC、零min-height、零或者“auto”的height、没有普通流的子box

垂直方向上毗邻的box不会发生折叠的情况:

根元素的外边距不会参与折叠

一个有clearance的box的上下margin毗邻,它会与紧接着的下一个box发生margin折叠,但折叠后的margin不会再与它们父box的bottom margin折叠

折叠边距的计算

当两个margin都是正值的时候,取两者的最大值;当 margin 都是负值的时候,取的是其中绝对值较大的,然后,从 0 位置,负向位移;当有正有负的时候,先取出负 margin 中绝对值中最大的,然后,和正 margin 值中最大的 margin 相加。但必须注意,所有毗邻的margin要一起参与运算,不能分步进行。

如何解决再float的情况下两个盒子折叠在一起呢?方法当然是建立一个bfc

<div style="background:#eee;border:1px solid red;overflow:hidden;">
<div id="A" style="background:#aaa;overflow:auto;margin-top:20px;">
<div id="B" style="background:white;border:1px solid green;margin-top:10px;">
B:给A加了overflow:auto之后,我有10px的margin-top了
</div>
</div>
</div>

上面可以看到,想解决垂直边距叠加问题,关键就是给相对应的容器新建一个BFC。

建立一个BFC来解决处于同一个盒子中的两个不同盒子分离出来

2.BFC可以包裹浮动元素实例解析

继续BFC的话题的讨论,本文讨论一个简单的例子:如何制作两行两列的网页布局,解决浮动布局不换行的问题。

制作两行两列的布局方法很多,浮动布局、表格布局和基于display:inline-block的列表布局。这个重点讨论浮动布局,因为我们这里要解决浮动布局里的一个问题:元素浮动不换行怎么办?其他布局先做简单叙述,作为拓展将在以后的博文里仔细论述。
用浮动布局实现

考虑一下下面的例子,目标是显示成两行两列:

2000

<div id="A">
<div id="red" style="background: red;width: 100px;height: 100px;float: left;"></div>
<div id="orange" style="background: orange;width: 100px;height: 100px;float: left;"></div>
</div>
<div id="B">
<div id="yellow" style="background: yellow;width: 100px;height: 100px;float: left;"></div>
<div id="green" style="background: green;width: 100px;height: 100px;float: left;"></div>
</div>

我们可以看到四个盒子最终都处在一列里面。

但我们的本意是让他们处在同一个盒子,并分成两列的。

有什么方法呢?

在其中一个外层盒子建立一个BFC了。

<div id="A" style="display:inline-block;">
<div id="red" style="background: red;width: 100px;height: 100px;float: left;"></div>
<div id="orange" style="background: orange;width: 100px;height: 100px;float: left;"></div>
</div>
<div id="B">
<div id="yellow" style="background: yellow;width: 100px;height: 100px;float: left;"></div>
<div id="green" style="background: green;width: 100px;height: 100px;float: left;"></div>
</div>

200

好了,终于实现两行两列的浮动布局了,明白了吗?就是BFC的作用:BFC可以包裹浮动元素

3.左边的浮动,右边的盒子被左边的遮住了

以前我一直以为是正常的,现在了解到BFC才了解到原来可以避免,以前一直是通过给右边添加padding-left或者margin-left来使之脱离了左边的遮罩。

现在才知道可以通过给右边建立新的BFC来使之在A的右边的。
2000

代码可以为:

<div class="item">
<div class="img"></div>
<div class="content"></div>
</div>

css代码可以为

.img{float:left; margin-right:10px; }
.content{overflow:auto; zoom:1;}

4.层内浮动溢出的探讨

<div id="side" style="float:left">向左浮动元素</div>
<div id="content">
<div id="content-inner">
<ul class="content-banner clearfix">
<li class="item" style="float:left">向左浮动元素</li>
<li class="item" style="float:left">向左浮动元素</li>
<li class="item" style="float:left">向左浮动元素</li>
</ul>
</div>
</div>

这个问题实例中给ul的父级元素加一个:overflow:auto;*zoom:1就可以了(加浮动也可以或其他),即新建一个BFC,问题解决了。

本文示例来自这篇:BFC学习札记,非常感谢作者写出这么高质量的文章。

另外我这里也很喜欢他举出的几个例子和解决方法。希望日后可以发现更多相关BFC的内容。(作者网站已经挂掉,链接暂时去掉)

1、BFC可以阻止垂直边距叠加问题

2、BFC可以包含内部元素的浮动

3、BFC可以阻止元素被浮动覆盖

4、BFC可以决定清除浮动的范围

参考资料:

白话Block Formatting Context

CSS定位机制之一:普通流

CSS 101: Block Formatting Contexts(BFC)(原文已挂掉,这里是转载的)

Block-level boxes、containing block、block formatting context 三者之间的区别和联系

关于Block Formatting Context(BFC)

原文链接:css学习专题-BFC 版权所有,转载时请注明出处,违者必究。
注明出处格式:前端开发博客 (http://caibaojian.com/bfc.html)

发表评论

请登录后发表评论: