bfc详解

发表于 | | 阅读次数

BFC详解

人们经常会说到BFC,在网上面也有很多BFC的文章, 介绍了如何触发BFC,以及BFC的一些用处(如:清除浮动,防止margin重叠等). 
虽然我们知道如何利用BFC去解决问题,但是当真正问道BFC是什么的时候,还是不能很励志气壮的解释清楚.
所以,最近我翻阅很多文档,现在在这里对BFC进行一个全面的汇总讲解

一. 什么是BFC

BFC的定义

BFC(Block Formatting Context) 直译为 “块级格式化上下文”.
是 W3C CSS 2.1 规范中的一个概念，
它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。
当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。
一个环境中的元素不会影响到其它环境中的布局。
比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。
这里有点类似一个BFC就是一个独立的行政单位的意思。也可以说BFC就是一个作用范围。
可以把它理解成是一个独立的容器，并且这个容器的里box的布局，与这个容器外的毫不相干。

BFC布局规则

  1. 内部的Box会在垂直方向，一个接一个地放置。
  2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
  4. BFC的区域不会与float box重叠。
  5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  6. 计算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. 自适应两栏布局
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style>
    .father {
        width: 300px;
        position: relative;
    }
 
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: red;
    }
 
    .main {
        height: 200px;
        background: pink;
    }
</style>
<body>
	<div class="father">
		<div class="aside"></div>
		<div class="main"></div>
	</div>
</body>
aside这个盒子是左浮动,脱离标准流,不占位置.
而且main这个盒子由于没有给宽度会继承父盒子father的宽度.
所以实现的效果是,aside这个盒子是压在main这个盒子的上面,左上角对齐.

根据BFC布局规则第3条：

每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

因此，虽然存在浮动的元素aslide，但main的左边依然会与包含块的左边相接触。

当根据BFC布局规定的第四条 

BFC的区域不会与float box重叠。

我们可以通过触发main生成BFC,来实现自适应两栏布局.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.main {
    overflow: hidden;
}
```	
当触发main生成BFC后，这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度，和aside的宽度，自动变窄。
2. 清除内部浮动
```html
<style>
    .father {
        border: 5px solid #fcc;
        width: 300px;
    }
 
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="father">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
father这个盒子只有宽度,没有高度,child两个盒子,正常显示

根据BFC布局规则第六条

计算BFC的高度时，浮动元素也参与计算

为达到清除内部浮动，我们可以触发father生成BFC，那么father在计算高度时，father内部的浮动元素child也会参与计算

1
2
3
.father {
    overflow: hidden;
}
  1. 防止垂直 margin 重叠
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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重叠。

根据BFC布局规则第二条

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
    .wrap {
        overflow: hidden;
    }
    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>

其实以上的几个例子都体现了BFC布局规则第五条

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

三. 总结

因为BFC内部的元素和外部的元素绝对不会互相影响，
因此，当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。
同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。
避免margin重叠也是这样的一个道理。