【前端从0开始】CSS——11、BFC

BFC (Block Formatting Context)

BFC，块级格式化上下文，规定了内部的块级元素的布局方式。默认情况下只有根元素（即body）一个块级上下文。

• BFC是一个独立的布局环境，BFC内部的元素布局与外部互不影响。
• 通过一些条件触发BFC，可以满足布局需求或解决问题。
• 将BFC看作一个工具，无需探究定义，重点理解功能（特性）。

1.1 BFC布局规则

• 内部的块级元素在垂直方向上一个接一个地放置。
• 块级元素垂直方向的距离由margin决定；属于同一个BFC的两个相邻块级元素的margins会合并。
• 每个元素的margin box的左边，与包含border box的左边相接触。
• BFC的区域不会与float box重叠。
• BFC是一个隔离的独立容器，子元素不会影响外部的元素，反之亦然。
• 浮动元素也会被计算在BFC的高度内。

1.2 创建一个BFC

一个BFC可以通过以下方法被触发：

• float 的值不为 none。
• overflow 的值不为 visible。
• position 的值为 fixed 或 absolute。
• display 的值为 table-cell, table-caption, inline-block, flex, 或 inline-flex。

特性

• 同一个BFC的两个相邻容器的上下margins会合并。
• 浮动元素也会被计算在BFC的高度内。
• BFC的区域不会与浮动元素重叠。
• BFC内的元素在垂直方向上会一个接一个地放置。
• BFC是一个隔离的独立容器。

1.3 BFC的应用

1.3.1 外边距折叠

垂直方向上的外边距会合并。

.container {
  overflow:hidden;
  width:100px;
  height:100px;
  background:red;
}
.box1 {
  height:20px;
  margin:10px 0;
  background:green;
}
.box2 {
  height:20px;
  margin:20px 0;
  background:blue;
}
.box3 {
  overflow:hidden;
}

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

BFC可以解决高度塌陷问题。

css

.outside {
  border: 10px solid blue;
  overflow: hidden;
}
.inside {
  float: left;
  width: 200px;
  height: 200px;
  background: yellowgreen;
}

1.3.3 阻止元素被浮动元素覆盖

css

.left {
  float: left;
  width: 100px;
  height: 200px;
  background: yellowgreen;
}
.right {
  height: 300px;
  background: blue;
  overflow:hidden;
}

1.3.4 在垂直方向上依次排列

css

.outside {
  border: 10px solid blue;
}
.inside {
  width: 200px;
  height: 200px;
  background: yellowgreen;
}

1.3.5 防止文字环绕

浮动的盒子会遮挡下面的盒子，但文字会环绕浮动的盒子。

css

.left {
  float: left;
  width: 100px;
  height: 100px;
  background: yellowgreen;
}
p {
  background: red;
  overflow: hidden;
}