美文网首页
BFC(块级格式化上下文)

BFC(块级格式化上下文)

作者: 楓丶無痕 | 来源:发表于2017-09-25 09:56 被阅读0次
    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

    相关文章

      网友评论

          本文标题:BFC(块级格式化上下文)

          本文链接:https://www.haomeiwen.com/subject/sesrextx.html