跳到主要内容

常规流与 BFC

常规流是什么？​

  • flow layout: 浏览器默认的布局模式;
  • 无特殊定位/浮动时, 所有元素按常规流排布;

块级盒与内联盒在常规流中如何排列？​

  • 块级盒: inline size 默认填满父元素 inline 方向, 沿 block flow 依次排列;
  • 内联盒: 沿 inline flow 依次排列, 填满父元素才换行;
  • 方向: 均依赖父元素的 writing-mode;
  • 内联盒尺寸与盒模型行为见 display 与盒类型;

BFC 有什么特点？​

  • 内部 block box 按常规流在 block axis 排列;
  • 隔离内部与外部浮动影响;
  • 阻止内部 margin 与外部 margin collapse;
  • 但内部相邻 block box 之间仍可能 collapse;
  • 高度计算包括浮动子元素, 防止浮动元素溢出;

如何创建 BFC？​

  • 根元素;
  • float 非 none;
  • position: absolute 或 fixed;
  • display: flex、grid、flow-root、inline-block 等;
  • overflow 非 visible/clip;

BFC 有哪些应用场景？​

  • 清除浮动;
  • 解决 margin collapse, 把其中一个元素包进 BFC;
  • 实现自适应多栏布局;