记录–为什么没有人能讲清楚 BFC?

  • 记录–为什么没有人能讲清楚 BFC?已关闭评论
  • 86 次浏览
  • A+
所属分类:Web前端
摘要

CSS 规范(英文) | 中文翻译浮动,绝对定位的元素,非块盒的块容器(例如inline-blocks,table-cells和table-captions),以及’overflow’不为’visible’的块盒(当该值已被传播到视口时除外(except when that value has been propagated to the viewport))会为其内容建立新的块格式化上下文


这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

记录--为什么没有人能讲清楚 BFC?

一、你看得懂权威的解释吗?

1. CSS 规范中对 BFC 的描述

CSS 规范(英文) | 中文翻译

浮动,绝对定位的元素,非块盒的块容器(例如inline-blocks,table-cells和table-captions),以及’overflow’不为’visible’的块盒(当该值已被传播到视口时除外(except when that value has been propagated to the viewport))会为其内容建立新的块格式化上下文

在一个块格式化上下文中,盒在垂直方向一个接一个地放置,从包含块的顶部开始。两个兄弟盒之间的垂直距离由'margin'属性决定。同一个块格式化上下文中的相邻块级盒之间的垂直外边距会合并

在一个块格式化上下文中,每个盒的左外边界(left outer edge)挨着包含块的左外边界(对于从右向左的格式化,右外边界挨着)。即使存在浮动(尽管一个盒的行框可能会因为浮动而收缩 译注:环绕浮动元素放置的行框比正常的行短一些),这也成立。除非该盒建立了一个新的块格式化上下文(这种情况下,该盒自身可能会因为浮动变窄)

2. MDN 对 BFC 的描述

MDN链接

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

下列方式会创建块格式化上下文:

  • 文档的根元素(<html>)。
  • 浮动元素(即 float 值不为 none 的元素)。
  • 绝对定位元素(position 值为 absolute 或 fixed 的元素)。
  • 行内块元素(display 值为 inline-block 的元素)。
  • 表格单元格(display 值为 table-cell,HTML 表格单元格默认值)。
  • 表格标题(display 值为 table-caption,HTML 表格标题默认值)。
  • 匿名表格单元格元素(display 值为 table(HTML 表格默认值)、table-row(表格行默认值)、table-row-group(表格体默认值)、table-header-group(表格头部默认值)、table-footer-group(表格尾部默认值)或 inline-table)。
  • overflow 值不为 visible 或 clip 的块级元素。
  • display 值为 flow-root 的元素。
  • contain 值为 layoutcontent 或 paint 的元素。
  • 弹性元素(display 值为 flex 或 inline-flex 元素的直接子元素),如果它们本身既不是弹性网格也不是表格容器。
  • 网格元素(display 值为 grid 或 inline-grid 元素的直接子元素),如果它们本身既不是弹性网格也不是表格容器。
  • 多列容器(column-count 或 column-width (en-US) 值不为 auto,且含有 column-count: 1 的元素)。
  • column-span 值为 all 的元素始终会创建一个新的格式化上下文,即使该元素没有包裹在一个多列容器中(规范变更Chrome bug

格式化上下文影响布局,通常,我们会为定位和清除浮动创建新的 BFC,而不是更改布局,因为它将:

看了以上最权威的定义,你能看懂吗?如果不可以的话,那我们来看看国内 CSS 界大佬 —— 张鑫旭 的描述吧。

3. 张鑫旭对 BFC 的描述

博客链接

BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。啪啦啪啦特性什么的,一言难尽,大家可以自行去查找,我这里不详述,免得乱了主次,总之,记住这么一句话:BFC元素特性表现原则就是,内部子元素再怎么翻江倒海,翻云覆雨都不会影响外部的元素。所以,避免margin穿透啊,清除浮动什么的也好理解了。

张鑫旭直接不详细讲解了,而是让大家自行查找。

所以,不管你在网上怎么搜索,不管你问谁,你都无法得到关于 BFC 的详细定义。

二、为什么没法解释 BFC 是什么?

每个人都知道涩情是什么,但是没有一个人能把涩情说清楚

正如:

  1. 我不知道什么是 BFC
  2. 但是你写出样式,我就知道这是不是 BFC

BFC 就是这样的东西 (堆叠上下文也是)

  1. 它没有定义
  2. 他只有特性/功能

三、所以,我们究竟该如何理解 BFC?

既然 BFC 的定义我们讲不清楚,那我们就不去研究它的定义了,我们知道如何去使用就可以了,所以我们应该从特性/功能去理解 BFC

先把 BFC 翻译过来:

  • Block Formatting Context
  • 块级格式化上下文

功能1: 爸爸管儿子

用 BFC 包住浮动元素。(注意!这不是清除浮动,.clearfix 才是清除浮动)

在特定的情况下,会导致父容器无法包裹住子容器,请看代码:

<style>   .father{     border: 1px solid red;   }    .son{     height: 100px;     background: blue;     width: 400px;     float: left; <- 注意这一行   } </style>  <div class="father">   <div class="son"></div> </div>

正常来讲,father 是会抱住裹住 son 的,但我在 son 加上 float: left; 之后,却包不住了,看下面效果截图:

记录--为什么没有人能讲清楚 BFC?

解决方法:

  • father 浮动起来,例如加上:float:left;
  • father 设置为绝对定位,例如加上:position: absolute
  • father 变为非块盒容器,例如加上:display: inline-blocks
  • 不让 fatheroverflow 的值为 visible,例如加上:overflow: auto
    (overflow 的默认值是 visible)
  • 使用绝招:在 father 上添加 display: flow-root;,这段代码只有一个功能,就是让当前元素变成一个 BFC,并且没有其他的副作用!

但是在 BFC 里的元素的垂直 margin 合并

功能2: 兄弟之间划清界限

float + div 做左右自适应布局

看代码:

<style>   .big-bro{     width: 100px;     height: 200px;     background:rgba(0,0,0,0.3);     float: left;     border: 2px solid blue;   }    .young-ber{     height: 200px;     background: yellow;     border: 5px solid red;   } </style>  <div class="big-bro"></div> <div class="young-ber"></div>

效果图:

哥哥把弟弟压到下面去了!

记录--为什么没有人能讲清楚 BFC?

解决方法:在弟弟元素加上:overflow: auto;

请看效果:

记录--为什么没有人能讲清楚 BFC?

总结

所以,不要尝试解释什么是 BFC,因为你一解释就错,我不明白面试官为什么经常要问 :)

本文转载于:

https://juejin.cn/post/7303392509664247835

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 记录--为什么没有人能讲清楚 BFC?