深入了解CSS中的BFC

深入了解BFC

  • 首先了解FC(formatting context)
    • 格式上下文

分为 BFC 和IFC

  • BFC(block formatting context)
    • 块级格式上下文

在这里插入图片描述

  • IFC (inline formatting context)
    • 行内级格式上下文

在这里插入图片描述

可以出发BFC的情况

深入了解CSS中的BFC_第1张图片

触发BFC可以做什么

解决高度塌陷

深入了解CSS中的BFC_第2张图片

  • 包裹元素高度塌陷
  • 要么清除浮动解决
  • 要么触发bfc解决 这里采用bfc

深入了解CSS中的BFC_第3张图片
深入了解CSS中的BFC_第4张图片

解决margin折叠

深入了解CSS中的BFC_第5张图片

  • 解决办法 触发BFC,使得俩个红色box处于不同的BFC环境下

深入了解CSS中的BFC_第6张图片
深入了解CSS中的BFC_第7张图片

  • 不过此时虽然可以解决高度塌陷,但是不建议使用margin,可以设置父元素的padding来增加距离

你可能感兴趣的:(HTML+CSS,css,前端,html,BFC)