- A+
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助
一、你看得懂权威的解释吗?
1. CSS 规范中对 BFC 的描述
浮动,绝对定位的元素,非块盒的块容器(例如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 的描述
区块格式化上下文(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
值为layout
、content
或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 是什么?
每个人都知道涩情是什么,但是没有一个人能把涩情说清楚
正如:
- 我不知道什么是 BFC
- 但是你写出样式,我就知道这是不是 BFC
BFC 就是这样的东西 (堆叠上下文也是)
- 它没有定义
- 他只有特性/功能
三、所以,我们究竟该如何理解 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;
之后,却包不住了,看下面效果截图:
解决方法:
- 让
father
浮动起来,例如加上:float:left;
- 把
father
设置为绝对定位,例如加上:position: absolute
- 让
father
变为非块盒容器,例如加上:display: inline-blocks
- 不让
father
的overflow
的值为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>
效果图:
哥哥把弟弟压到下面去了!
解决方法:在弟弟元素加上:overflow: auto;
请看效果:
总结
所以,不要尝试解释什么是 BFC,因为你一解释就错,我不明白面试官为什么经常要问