BFC全称是Block Formatting Context,即块格式化上下文。它是CSS2.1规范定义的,关于CSS渲染定位的一个概念。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

6.1 BFC布局规则

  1. 内部的Box会在垂直方向,一个接一个地放置;
  2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠;
  3. 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。;
  4. BFC的区域不会与float box重叠,常用来清除浮动和布局。;
  5. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。;
  6. 计算BFC的高度时,浮动元素也参与计算;

    6.2 会生成BFC的元素

  • 根元素或其它包含它的元素;
  • 浮动 (元素的float不为none);
  • 绝对定位元素 (元素的positionabsolutefixed);
  • 行内块inline-blocks(元素的 display: inline-block);
  • 表格单元格(元素的display: table-cell,HTML表格单元格默认属性);
  • overflow的值不为visible的元素;
  • 弹性盒 flex boxes (元素的display: flexinline-flex);

    6.3 BFC的范围

    BFC的范围在MDN中是这样描述的。

    A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.

中文的意思一个BFC包含创建该上下文元素的所有子元素,但不包括创建了新BFC的子元素的内部元素。
插入一段代码方便理解

1
2
3
4
5
6
7
8
9
10
<div class='div_1 BFC'>
<div class='div_2'>
<div class='div_3'></div>
<div class='div_4'></div>
</div>
<div class='div_5 BFC'>
<div class='div_6'></div>
<div class='div_7'></div>
</div>
</div>

div_1创建了一个块格式上下文,这个上下文包括了div_2div_3div_4div_5。即div_2中的子元素也属于div_1所创建的BFC。但由于div_5创建了新的BFC,所以div_6div_7就被排除在外层的BFC之外。
这就代表着一个元素不能同时存在于多个BFC中。
BFC的一个最重要的效果是,让处于BFC内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。这是利用BFC清除浮动所利用的特性。

6.4 BFC的常用方式:

6.4.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
25
26
27
28
29
<style type="text/css">
.box{
width: 900px;
background: black;
height: 300px; // 增加高度
}

.box1{
height: 300px;
width: 300px;
background: red;
float: left;
}

.box2{
height: 300px;
width: 300px;
background: blue;
float: left;
}

</style>

......

<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>

上面的代码定义了3个块,一个父级包含了两个子集,但是父级的背景颜色无法显示,是因为子集元素浮动导致了父级高度的塌陷。
image.png


在为box设置BFC后,box的高度才能找回来。
image.png
从而显示出正确的样式。

####

6.4.2 子级margin-top将父级带下 为父级触发BFC

一个盒子有上边距 另一个有下边距 会出现margin边距的重叠问题
并列盒子的margin重写=>双margin的重叠
-> 取大值 并不是他们相加之和 也就是谁大听谁的

要将黑色块中的小红块下移一点,直接使用了margin-top,结果黑块一起下移了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style type="text/css">
.box{
width: 300px;
height: 300px;
background: black;
}

.box1{
height: 100px;
width: 100px;
background: red;
margin-top: 50px;
}

</style>

......

<div class="box">
<div class="box1"></div>
</div>

而设置了BFC后,就能正确的下浮红色块

margin的兼容问题:margin top的传递问题

大盒子里面嵌套小盒子 给小盒子加margin-top 不但没有实现和大盒子之间的间距 反而传递给大盒子身上 导致整体下移动
解决兼容性问题

  1. overflow:hidden 解决margin-top的传递问题(此处并没有溢出隐藏)
  2. padding-方位:1px 这种方法影响最后实际宽高 需要在width/height上基础上减掉才不会影响最后实际的宽高
  3. border-top:1px 这种方法会影响最后实际的高度 需要在高度height上基础上减掉 才不会影响最后实际的高度
  4. 给子元素的margin-top的值改成父元素的padding-top,这样就避免使用margin-top值导致传递的问题