什么是BFC?
MDN:
块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。
个人理解:
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
或 paint 的元素 -
弹性元素(
display
为flex
或inline-flex
元素的直接子元素) -
网格元素(
display
为grid
或inline-grid
元素的直接子元素) -
多列容器(元素的
column-count
或column-width
不为auto,包括 ``column-count
为1
) -
column-span
为all
的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中(标准变更,Chrome bug)。
BFC布局规则特性
- 内部盒子会在垂直方向,一个接一个排列
- 同属一个BFC的两个相邻盒子的margin会发生重叠
- 每个盒子(块盒与行盒)的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
- 计算高度时,浮动或者定位的元素也会参与计算。
- 不会影响到外面元素
BFC的作用
1.实现右侧栏盒子自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.left {
float: left;
height: 300px;
width: 200px;
background-color: red;
}
.right {
overflow: hidden;
height: 500px;
width: 100%;
background-color: aqua;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
页面渲染如图:
2.解决外边距合并问题
同属一个BFC的两个相邻盒子的margin会发生重叠
创建不属于同一个BFC,就不会发生margin重叠了。
3.清除浮动
当父盒子没有设置高度,子盒子浮动,就会发现高度崩塌的问题
父元素设为BFC
利用的就是BFC计算高度时,浮动或者定位的元素也会参与计算。
总结
BFC就是页面上一个隔离的独立的容器。容器里面的子元素不会在布局上影响到外面的元素。反之也是如此。例如外边距合并,浮动。