基础 basement

1、BFC 块状格式化上下文


如何创建bfc:

  • 根元素 html
  • 浮动元素 float:left/right
  • 绝对定位元素 position:absolute/fixed
  • display相关 display:inline-block/表格相关(table-caption/table-cell....等)
  • overflow不为visible的元素
  • 弹性布局或网格布局的直接子元素(flex/inline-flex grid/inline-grid)


表现:在包含块内一个盒子一个盒子不重叠地垂直排列,两个兄弟盒子直接的垂直距离由margin决定

作用:

  • 防止margin重叠
  • 清除浮动
  • 自适应多栏布局
确认 取消