关于BFC

定义:

Block formatting contexts 块格式化上下文。

  1. 能包裹住内部(浮动)元素
  2. 能与外部浮动元素划清界限、产生边界

使用方式:

常用

  1. 块级元素的 overflow 属性不为 visible
  2. 使用float 使其浮动的元素
  3. flex items
  4. 绝对定位的元素 (包含 position: fixed 或position: sticky)
  5. 元素属性为 display: flow-root 或 display: flow-root list-item

附加

  1. 表格单元格或使用 display: table-cell, 包括使用 display: table-* 属性的所有表格单元格
  2. 表格标题或使用 display: table-caption 的元素
  3. 元素属性为 contain: layout, content, 或 strict
  4. 网格布局元素
  5. multicol containers
  6. 元素属性 column-span 设置为 all
  7. 使用以下属性的元素 display: inline-block

用途

  1. 清除浮动

参考

MDN

posted @ 2022-11-01 16:43  badpear  阅读(21)  评论(0)    收藏  举报