块格式化上下文
什么是块格式化上下文?
块格式化上下文(Block Formatting Context,BFC)是 Web 页面的可视化 CSS 渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。
可以将 BFC 通俗理解为一个独立的布局环境,BFC 内的元素不会影响外部其他元素的布局。且当一个元素被某些条件触发变为 BFC 后,BFC 内的元素布局将不受外界影响,视 BFC 为根元素。
块格式化上下文的创建方式
- 根元素(
<html>
)
- 浮动元素(元素的
float
不是none
)会创建 BFC,浮动元素内部子元素布局主要受该浮动元素影响,所以两个浮动元素之间是互不影响的
- 绝对定位元素(元素的
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
计算值 (Computed) 不为visible
的块元素
display
值为flow-root
的元素
contain
值为layout
、content
或paint
的元素
- 弹性元素(
display
为flex
或inline-flex
元素的直接子元素)
- 网格元素(
display
为grid
或inline-grid
元素的直接子元素)
- 多列容器(元素的
column-count
或column-width
不为auto
,包括column-count
为1
)
column-span
为all
的元素始终会创建一个新的 BFC,即使该元素没有包裹在一个多列容器中。
外边距重叠
什么是外边距重叠?
有时相邻块的下外边距和上外边距会重叠为单个边距,这种现象叫作外边距重叠。
外边距折叠的三种情况
1. 直接相邻的两个元素间
相邻的两个元素之间的外边距重叠:
可见蓝绿方块之间边距为 50px,而非两外边距之和 100px,外边距发生了折叠。
2. 没有内容将父元素和后代元素分开
如果没有边框
border
,内边距 padding
,行内内容,也没有创建 BFC 或清除浮动来分开一个块级元素的上边界 margin-top
与其内一个或多个后代块级元素的上边界 margin-top
;或没有边框,内边距,行内内容,高度 height
,最小高度 min-height
或最大高度 max-height
来分开一个块级元素的下边界 margin-bottom
与其内的一个或多个后代后代块元素的下边界 margin-bottom
,则就会出现父块元素和其内后代块元素外边界重叠,重叠部分最终会溢出到父级块元素外面。可见
<section>
元素与界面上边框距离不等于其自身上边界 50px,而等于其子元素 <div>
的上边界100px,这是因为 <div>
的上边界出现了溢出。3. 空的块级元素
当一个块元素上边界
margin-top
直接贴到元素下边界 margin-bottom
时也会发生边界折叠。这种情况会发生在一个块元素完全没有设定边框 border
、内边距 padding
、高度 height
、最小高度 min-height
、最大高度 max-height
、内容设定为 inline 或是加上 clear-fix 的时候。横线与顶部距离不等于空元素的上下边距之和 150px,而等于更大的下边距 100px,可见出现了外边距重叠。
一些需要注意的地方:
- 上述情况的组合会产生更复杂的外边距折叠。
- 即使某一外边距为 0,这些规则仍然适用。因此就算父元素的外边距是 0,第一个或最后一个子元素的外边距仍然会“溢出”到父元素的外面。
- 如果参与折叠的外边距中包含负值,折叠后的外边距的值为最大的正边距与最小的负边距(即绝对值最大的负边距)的和。如有 -13px 8px 100px 叠在一起,边距就是 100px-13px 的 87px。
- 如果所有参与折叠的外边距都为负,折叠后的外边距的值为最小的负边距的值。这一规则适用于相邻元素和嵌套元素。
外边距重叠的防止方法
- 直接相邻的两个元素间:对元素设定设定
float
或position: absolute
;
- 没有内容将父元素和后代元素分开:创建边框
border
,内边距padding
,行内内容;或创建 BFC 抑或是清除浮动来分开一个块级元素的上边界margin-top
与其内一个或多个后代块级元素的上边界margin-top
;或创建边框,内边距,行内内容,高度height
,最小高度min-height
或最大高度max-height
来分开一个块级元素的下边界margin-bottom
与其内的一个或多个后代后代块元素的下边界margin-bottom
;
- 空的块级元素:避免元素上边界
margin-top
直接贴到元素下边界 。