简述CSS中的BFC

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

一、BFC的布局规则

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

二、哪些元素会生成BFC

  • 根元素()
  • 浮动元素(元素的float不是 none
  • 绝对定位元素(元素的positionabsolutefixed
  • overflow的值不为visible (常用的触发BFC的方式)
  • display属性相关,display属性为如下值时
    • 行内块元素: inline-block
    • 表格标题: table-caption
    • 表格内容格相关: 元素的displaytabletable-rowtable-row-grouptable-header-grouptable-footer-group(分别是HTML table、row、tbody、thead、tfoot的默认属性)或 inline-table
    • 弹性元素:flexinline-flex
    • 网格元素:gridinline-grid
    • 新增的display属性值:flow-root,专门用来生成一个无副作用的BFC
  • 多列布局容器:元素的column-countcolumn-width 不为 auto,包括 column-count1

三、BFC的应用

1. 清除内部浮动

示例:

  

* {
  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. 自适应两栏布局

示例:


  
  
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-块级格式化上下文

你可能感兴趣的:(简述CSS中的BFC)