简述CSS中的BFC

2020-04-22 本文已影响0人醉月梦仙

BFC是指一个独立的块级渲染区域，只有Block-level Box（块级元素）参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
BFC可以理解为一个作用范围，即在一个BFC里的布局与其之外的布局不相关或者说不相互影响。在页面中，每个BFC盒子就像是一个个快递盒子，盒子内部子元素如何排列、浮动对其他快递盒子不会产生影响。

一、BFC的布局规则

内部的Box会在垂直方向上一个接一个地放置
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（上面元素的margin-bottom和下方元素的margin-top）（按照最大margin值设置）
每个元素的margin box的左边，与包含块border box的左边相接触（从右到左的格式，则为紧挨右边框），即使浮动元素也是如此（这说明BFC中的子元素不会超出它的包含块）
BFC的区域不会与浮动盒子重叠。
计算BFC的高度时，浮动元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素

二、哪些元素会生成BFC

根元素(<html>)
浮动元素（元素的float不是 none）
绝对定位元素（元素的position为 absolute 或 fixed）
overflow的值不为visible （常用的触发BFC的方式）
display属性相关，display属性为如下值时
- 行内块元素： inline-block
- 表格标题： table-caption
- 表格内容格相关：元素的display为 table、table-row、table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table
- 弹性元素：flex或inline-flex
- 网格元素：grid或inline-grid
- 新增的display属性值：flow-root，专门用来生成一个无副作用的BFC
多列布局容器：元素的column-count或 column-width 不为 auto，包括 column-count 为 1

三、BFC的应用

1. 清除内部浮动

示例：

  <div>
    <h2></h2>
    <h2></h2>
  </div>

* {
  margin:0;
  padding:0;
}
div {
  border: 5px solid green;
}
h2 {
  width: 50px;
  height: 50px;
  background-color: pink;
  float: left;
}

显示结果如下

浮动元素父元素塌陷.PNG

根据BFC布局规则中的规定，计算BFC的高度时，浮动元素也参与计算

div {
  overflow: hidden;  /*触发BFC*/
}

添加后结果如下

BFC解决高度塌陷.PNG

2. 自适应两栏布局

示例：

<body>
  <nav></nav>
  <main></main>
</body>

html,body {
  width: 100%;
}
nav {
  width: 200px;
  height: 300px;
  background-color: pink;
  float: left;
}
main {
  height: 400px;
  background-color: green;
}

结果如下

两栏布局内容重叠.PNG

根据BFC布局规则，每个元素的margin box的左边，与包含块border box的左边相接触，因此main会紧贴body左边，被nav元素覆盖
此时利用BFC布局规则，BFC的区域不会与浮动盒子重叠，给main触发BFC，避免重叠

main {
  height: 400px;
  background-color: green;
  overflow: hidden;  /*触发BFC*/
}

结果如下

两栏布局实现.PNG

3. 防止外边距重叠

根据BFC布局规则，属于同一个BFC的两个相邻Box的margin会发生重叠。如果同属一个BFC的两个盒子，垂直方向上上方盒子设置margin-bottom:50px;，下方盒子设置margin-top:100px;，实际上两个盒子的外边距是100px（取了最大值）。
如果想解决这个问题，只需要给其中一个盒子包裹一个父元素容器，并将容器转化为BFC，那么这两个盒子便不属于同一个BFC，外边距便不会产生影响

参考资料：MDN-块级格式化上下文