块格式化上下文-BFC

BFC定义

块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。

BFC是一个独立的布局环境,其中的元素布局是不受外界的影响,并且在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。

布局规则

  • 内部的Box会在垂直方向,一个接一个地放置。
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
  • BFC的区域不会与float box重叠。
  • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
  • 计算BFC的高度时,浮动元素也参与计算。

创建BFC的方法

  • 根元素或包含根元素的元素
  • 浮动元素(元素的 float 不是 none)
  • 绝对定位元素(元素的 position 为 absolute 或 fixed)
  • 行内块元素(元素的 display 为 inline-block)
  • 表格单元格(元素的 display为 table-cell,HTML表格单元格默认为该值)
  • 表格标题(元素的 display 为 table-caption,HTML表格标题默认为该值)
  • 匿名表格单元格元素(元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group(分别是HTML table、row、tbody、thead、tfoot的默认属性)或 inline-table)
  • overflow 值不为 visible 的块元素
  • display 值为 flow-root 的元素
  • contain 值为 layout、content或 strict 的元素
  • 弹性元素(display为 flex 或 inline-flex元素的直接子元素)
  • 网格元素(display为 grid 或 inline-grid 元素的直接子元素)
  • 多列容器(元素的 column-count 或 column-width 不为 auto,包括 column-count 为 1)
  • column-span 为 all 的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中(标准变更,Chrome bug)

创建了块格式化上下文的元素中的所有内容都会被包含到该BFC中

BFC的用法

快格式化上下文其实在开发中会使用到,例如子元素定义float属性父级元素的高度不会撑开,我们会在父级元素添加overflow:hidden来解决这个问题,就是利用上面布局规则的最后一条来实现的。又如margin合并规则,多列布局,图片文字环绕等等,都可以用bfc来解决,具体看下面例子

display: flow-root

在创建BFC里有一个display:flow-root,具体解释可以看flow-root

The element generates a block container box, and lays out its contents using flow layout. It always establishes a new block formatting context for its contents.

可以通过此属性创建一个bfc,应该用此新的属性来解决上面的问题,很简单,但是浏览器还不全支持,可以通过@supports来实现降级处理,让支持的浏览器使用上这个属性,实现方法如下

.container {
    border: 1px solid red;
    /* 生成bfc的方法 */
    overflow: auto;
}

.f-el {
    float: left;
    width: 200px;
    height: 200px;
    background: #333;
}

@supports (display: flow-root) {
    .container {
        /* 生成bfc新的方法 */
        display: flow-root;
    }
}

 

标签: css3 html5 sass

目录

评论

*
*

正在加载验证码......

最新评论

  • 无评论