BFC小讲

Published on with 0 views and 0 comments

BFC

什么是BFC

BFC是个简称，英文名是Block Formatting Content，中文名是 暴风城 块级格式上下文，他还有3个兄弟姐妹分别是IFC，FFC，GFC
BFC是个概念，一个特定的环境，决定了元素如何定位，如何布局，规定了内部元素的行为和对外部元素的表现

哪里有/如何触发

  1. 根元素 <html>
  2. 浮动元素：float: left; / float: right;
  3. 绝对定位元素：position: absolute; / position: fixed;
  4. 行内块元素：display: inline-block;
  5. 弹性元素：display: flex; / display: inline-flex;
  6. 网格元素：display: grid; / display: inline-grid;
  7. 表格
    • 表格单元格：display: table-cell;
    • 表格标题：display: table-caption;
    • 匿名表格单元格元素：
      • display: table; html table的默认值
      • display: table-row; html row的默认值
      • display: table-row-group; html tbody的默认值
      • display: table-header-group; html thead的默认值
      • display: table-footer-group; html tfoot的默认值
  8. 多列容器：元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1
  9. overflow 值 不为 visible 的块元素: overflow: auto; / overflow: hidden; / overflow: scroll;
  10. contain 值 为 layout、content、paint 的元素

渲染规则

  1. BFC是一个独立的容器，外卖的元素不会影响里面的元素
  2. 计算BFC高度时，浮动元素也会参与计算
  3. 属于同一个BFC的两个相邻Box的margin会发生重叠
  4. BFC的区域不会与浮动元素的box重叠

应用场景

  1. 清除浮动带来的副作用（父元素高度坍塌）并不是清除浮动
  2. 避免外边距折叠
标题：BFC小讲
作者：lj0812
地址：https://blog.hereis.me/articles/2019/12/02/1575279425303.html

↑ ↓