BFC是什么

66 阅读1分钟

BFC:块格式化上下文

BFC大概有十几种触发条件,以下总结5种比较常用的,其余的参考mdn

  1. 浮动元素(float不为none)

  2. 绝对定位元素(元素的 position 为 absolute 或者 fixed)

  3. 行内块 inline block 元素

  4. overflow 值不为 visible的元素

  5. 弹性元素 (display 为 flex 或 inline-flex元素的直接子元素)

解决了什么问题

  1. 清除浮动(但其实应该用 clearfix)

  2. 防止margin合并

  3. 某些古老的布局方式会用到(已过时)