分类目录归档:Css

理解BFC(Block Formatting Contexts)

BFC是满足以下至少一项的盒子:

  • “float”的值不是“none” ,
  • “overflow”的使用值不是“visible”,
  • “display”的值是“table-cell”,“table-caption”或“inline-block”,
  • “position”的值既不是“static”也不是“relative”。

何时触发BFC

以下内容将建立新的块格式上下文:

  • 浮动,
  • 绝对定位元素,
  • inline-blocks,
  • table-cells,
  • table-captions,
  • elements styled with “overflow” (any value other than “visible”)
  • elements styled with “display:flex” or “inline-flex” (flex boxes)

通过BFC特性能做些什么

  • 块格式化上下文可防止边缘折叠
  • BFC可以包含浮动的元素,防止父元素因为子元素脱离文档流,造成父元素的高度塌陷
  • BFC可以阻止元素被浮动元素覆盖,阻止元素因浮动引起的环绕效果
0