乐趣区

关于css3:BFC-的形成和作用

残缺高频题库仓库地址:https://github.com/hzfe/aweso…

残缺高频题库浏览地址:https://hzfe.github.io/awesom…

相干问题

  • BFC 有什么用,如何触发
  • 谈谈你对 BFC 的了解

答复关键点

盒模型 视觉格式化模型 蕴含块 失常流

BFC 是什么

BFC 全称为 block formatting context,中文为“块级格式化上下文”。它是一个只有块级盒子参加的独立块级渲染区域,它规定了外部的块级盒子如何布局,且与区域内部无关。

BFC 有什么用

  • 修复浮动元素造成的高度塌陷问题。
  • 防止非冀望的外边距折叠。
  • 实现灵便强壮的自适应布局。

触发 BFC 的常见条件

  • <html> 根元素。
  • float 的值不为 none。
  • position 的值不为 relative 或 static。
  • overflow 的值不为 visible 或 clip(除了根元素)。
  • display 的值为 table-cell,table-caption,或 inline-block 中的任意一个。
  • display 的值为 flow-root,flow-root,或 list-item。
  • flex items,即 display 的值为 flex 或 inline-flex 的元素的间接子元素(该子元素 display 不为 flex,grid,或 table)。
  • grid items,即 display 的值为 grid 或 inline-grid 的元素的间接子元素(该子元素 display 不为 flex,grid,或 table)。
  • contain 的值为 layout,content,paint,或 strict 中的任意一个。
  • column-span 设置为 all 的元素。

提醒display: flow-rootcontain: layout 等是无副作用的,可在不影响已有布局的状况下触发 BFC。

知识点深刻

1. 前置知识点

盒模型(box model)

盒模型 形容了一个由元素生成的矩形盒子,视觉格式化模型 决定这些盒子的大小、地位以及属性(例如色彩、背景、边框尺寸等等)。

盒子的具体形成如下图所示:

术语解析

因为视觉格式化模型形容中,有许多相近的术语,在此后行列出解释。

  • box(盒子):一个抽象概念,在画布上占据一块空间,通常由元素(element)生成。一个元素可能生成多个盒子(如伪元素、list-item 元素)。
  • principal box(次要盒子):元素生成的多个盒子中,用来蕴含它的后辈盒子和它生成的内容的盒子,也是参加任何定位计划的盒子。
  • block-level box(块级盒子):参加 BFC 布局的盒子,通常由块级元素生成。
  • block container box(块容器):在 CSS2.2 中,除了 tabel box 或替换元素的次要盒子,一个块级盒子也是块容器,但不是所有的块容器都是块级盒子(如非替换内联块盒子)。块容器次要侧重于其子元素的定位、布局。
  • block box(块盒子):如果一个块级盒子同时也是块容器,则能够称作块盒子。
  • block(块):当没有歧义时,作为 block box, block-level box 或 block container box 的简写。

(注:盒子有“块盒子”和“块级盒子”,元素只有“块级元素”,而没有“块元素”)

2. 视觉格式化模型(visual formatting model)

视觉格式化模型形容了用户代理(如浏览器)在可视化媒体(如显示器)上解决文档树(document tree)的过程。上面各大节是视觉格式化模型中与 BFC 强相干的形容:

2.1 蕴含块(containing block)

大部分状况下,蕴含块是一个由元素最近的先人块容器的内容区域(content area)确定的矩形区域,蕴含块自身不是盒子,是一个矩形区域。元素的大小,地位,及偏移等布局信息依据蕴含块的尺寸进行计算。

2.2 失常流(normal flow)

失常流是浏览器的默认布局形式。在失常流中的盒子,属于 BFC,IFC,或其余格式化上下文之一。

2.3 格式化上下文(formatting context)

格式化上下文 是一系列相干盒子进行布局的环境。不同的格式化上下文有不同的布局规定。目前常见的格式化上下文有以下这些:

  • 块级格式化上下文(BFC,block formatting context)。
  • 内联格式化上下文(IFC,inline formatting context)。
  • 弹性格式化上下文(FFC,flex formatting context),在 CSS3 中定义。
  • 栅格格式化上下文(GFC,grid formatting context),在 CSS3 中定义。

2.4 独立格式化上下文(independent formatting context)

一个盒子要么建设一个新的独立格式化上下文,要么连续其蕴含块的格式化上下文。除了非凡阐明,建设新的格式化上下文就是在建设一个独立格式化上下文。

当一个盒子建设一个独立格式化上下文时,它创立了一个新的独立布局环境。除了通过扭转盒子自身的大小,盒子外部的后辈不会影响格式化上下文内部的规定和内容,反之亦然。

2.5 块级格式化上下文标准及解析

依据 W3C CSS2.1 视觉格式化模型一章的定义,BFC 相干标准形容如下:

  1. 浮动元素,相对定位元素,不是块级盒子的块级容器(如 inline-block,table-cells,table-captions)以及 overflow 值不为 visible 的块级盒子,都会为他们的内容创立 BFC(注:触发 BFC 的条件)。
  2. 在 BFC 中,盒子从蕴含块的顶部开始,在垂直方向上一个接一个的排列。相邻盒子之间的垂直间隙由它们的 margin 值决定。在同一个 BFC 中,相邻块级盒子的垂直外边距会合并(注:参加 BFC 布局的都是块级元素)。
  3. 在 BFC 中,每一个盒子的左外边缘(margin-left)会触碰到蕴含块的左边缘。即便是存在浮动元素也是如此,除非该盒子建设了一个新的 BFC。

联合标准第三点与 独立格式化上下文 的常识,咱们能够有以下推论:

  1. BFC 内外互不影响。
  2. BFC 蕴含外部的浮动(解决外部浮动元素导致的高度塌陷)。
  3. BFC 排挤内部的浮动(触发 BFC 的元素不会和内部的浮动元素重叠)。
  4. 外边距折叠的计算不能逾越 BFC 的边界。
  5. 各自创立了 BFC 的兄弟元素互不影响(注:在程度方向上多个浮动元素加一个或零个触发 BFC 的元素能够造成多列布局)。

通过 BFC 能够实现灵便强壮的自适应布局,在一行中达到相似 flexbox 的成果,示例如下:

两栏自适应布局

多列自适应布局

参考资料

  1. 块级格式化上下文
  2. 蕴含块:MDN
  3. 蕴含块:W3C
  4. 视觉格式化模型:MDN
  5. 视觉格式化模型:W3C
  6. 盒模型:MDN
  7. 盒模型:W3C
退出移动版