BFC（块级格式化上下文）

  1. BFC是什么？
  • BFC（block formatting context）块级格式化上下文，是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。
  1. BFC是怎么形成的？
  • 一个块格式化上下文由以下之一创建：
    • 根元素或其它包含它的元素
    • 浮动元素（float不为none）
    • 绝对定位元素（position：absolute | fixed）
    • 内联块（display：inline-block）
    • 表格单元格 （元素具有 display: table-cell，HTML表格单元格默认属性）
    • 表格标题 （元素具有 display: table-caption, HTML表格标题默认属性）
    • 具有overflow且值不是 visible 的块元素
    • display：flow-root
    • column-span: all应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。
  1. BFC有什么作用？
  • BFC能阻止垂直外边距的合并demo
  • BFC不会重叠浮动元素demo
  • BFC可以包含浮动元素demo
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容