BFC 详解

发表于 | 阅读次数

BFC 定义

BFC 全称 Block Formatting Context，块级格式化上下文。

一个 BFC 是网页中某个独立的 CSS 渲染区域。

w3c 对 BFC 定义

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的块级格式化上下文。
在一个块级格式化上下文里，盒子从包含块的顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的 margin 值所决定的。两个相邻的块级盒子的垂直外边距会发生叠加。
在块级格式化上下文中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘），即使存在浮动也是如此，除非这个盒子创建一个新的块级格式化上下文。

BFC 的产生

  • 根元素或包含它的其他元素
  • 浮动元素
  • position: absolute 和 position: fixed 的元素
  • display: inline-block 的元素
  • overflow 被设置成 visible 外的值的块状元素
  • <td> 和 display: table-cell 的元素
  • <caption> 和 display: table-caption 的元素
  • display: flow-root 的元素
  • column-span: all 的元素

BFC 特性

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

解决margin 合并问题

我们可以把目标元素外层添加一个 div 元素，设置 div 的border-top、padding-top、overflow:hidden、display:inline-block和display:flex。

1
// HTML
2
<p>hello world</p>
3
<p>hello world</p>
4
// CSS
5
p {
6
  color:black;
7
  background: #FF0000;
8
  width: 200px;
9
  line-height: 100px;
10
  text-align:center;
11
  margin: 30px;
12
}

两个p元素每个p之间的距离为30px，发生了外边距合并。 要解决这个合并问题即让每个P之间是60px，我们可以新建一个BFC，怎么建呢？可以给p元素添加一个父元素，让它触发BFC。

1
// HTML
2
<p>hello world</p>
3
<div>
4
  <p>hello world</p>
5
</div>
6
// CSS
7
p {
8
  color:black;
9
  background: #FF0000;
10
  width: 200px;
11
  line-height: 100px;
12
  text-align:center;
13
  margin: 30px;
14
}
15
div{
16
  overflow:hidden;
17
}

抑制浮动

1
// HTML
2
<div class="aside"></div>
3
<div class="main"></div>
4
// CSS
5
body {
6
  width: 300px;
7
  position: relative;
8
}
9
.aside {
10
  width: 100px;
11
  height: 150px;
12
  float: left;
13
  background: blue;
14
}
15
.main {
16
  height: 200px;
17
  background: #f00;
18
}

创建一个新的BFC来解决这个问题，让其内容消除对外界浮动元素的影响。

1
// CSS
2
body {
3
  width: 300px;
4
  position: relative;
5
}
6
.aside {
7
  width: 100px;
8
  height: 150px;
9
  float: left;
10
  background: blue;
11
}
12
.main {
13
  height: 200px;
14
  background: #f00;
15
  overflow:hidden;
16
}

使用 BFC 实现了我们想要的两栏布局

包含浮动

1
// HTML
2
<div class="BFC">
3
    <div class="box"></div>
4
    <div class="box"></div>
5
</div>
6
// CSS
7
.BFC {
8
  border: 3px solid red;
9
  width: 300px; 
10
}
11
.box {
12
  border: 3px solid blue;
13
  width: 100px;
14
  height: 100px;
15
  float: left;
16
}

由于子元素浮动脱离了文档流，父元素无法包含住子元素，触发父元素的 BFC，让父元素包含两个子元素。

1
// CSS
2
.BFC {
3
  border: 3px solid red;
4
  width: 300px; 
5
  overflow:hidden;
6
}
7
.box {
8
  border: 3px solid blue;
9
  width: 100px;
10
  height: 100px;
11
  float: left;
12
}