search

dashengzi66 / note

学习笔记
0 stars 0 forks source link

BFC-块级格式化上下文 #18

Open dashengzi66 opened 2 years ago

dashengzi66 commented 2 years ago

BFC-块级格式化上下文

BFC是页面上一个独立且隔离的渲染区域，容器里的子节点不会在布局上影响到外面的节点，反之亦然。

dashengzi66 commented 2 years ago

触发BFC的条件

  1. 根元素或其它包含它的元素
  2. 浮动元素 (元素的 float 不是 none)
  3. 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
  4. 内联块 (元素具有 display: inline-block)
  5. 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
  6. 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
  7. 具有overflow 且值不是 visible 的块元素
  8. 弹性盒（flex或inline-flex）
  9. display: flow-root
  10. column-span: all
dashengzi66 commented 2 years ago

BFC可以解决的问题

  1. 垂直外边距重叠问题
  2. 去除浮动
  3. 自适用两列布局（float + overflow）