# 前言
这是一篇笔记,因为一直对这部分的知识看了就忘,今天闲着无事翻了翻不少资料,所以有了这篇文章
# 怎么理解 BFC
首先,我们要知道 BFC 的全称是 Block Formatting Context,翻译成中文是块级格式化上下文,这里介绍下怎么理解 Formatting Context,Formatting Context 实际上是一种上下文环境,在这个上下文里的元素会与外界隔离,并且按照这个上下文里的规则排序和渲染,Block Formatting Context 就是一种上下文,其他上下文还有
- Inline formatting context : 行内格式化上下文
- flex formatting context : 设置了 display 为 flex 创建的上下文
- grid formatting context : 设置了 display 为 grid 创建的上下文
# 怎么创建 BFC
常见:
- 根元素(html 元素)
- 浮动元素(元素的 float 不是 none)
- 绝对定位元素(元素的 position 为 absolute 或 fixed)
- overflow 值不为 visible 的块元素
- 行内块元素(元素的 display 为 inline-block
- 弹性元素(display 为 flex 或 inline-flex 元素的直接子元素)
- 网格元素(display 为 grid 或 inline-grid 元素的直接子元素)
不常见:
表格单元格(元素的 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)
display 值为 flow-root 的元素
contain 值为 layout、content 或 paint 的元素
多列容器(元素的 column-count 或 column-width 不为 auto,包括 column-count 为 1)
column-span 为 all 的元素始终会创建一个新的 BFC,即使该元素没有包裹在一个多列容器中(标准变更,Chrome bug)。
# BFC 内部的元素排序规则
- 在普通流下的 BFC 内部的块级盒会在垂直方向上一个接一个排列。
- 同一 BFC 下的相邻块级元素会发生垂直方向的外边距折叠
- BFC 是一个独立的容器外面的元素不会影响 BFC 内部反之亦然。
# 形成了 BFC 元素的特殊性质
- 计算 BFC 元素的高度时,浮动元素也会参与计算。
- 浮动盒的区域不会和 BFC 元素重叠。
# BFC 的常见用处
# 自适应两栏布局
利用的是浮动盒的区域不会和 BFC 元素重叠这个特性
<style> | |
.left { | |
width: 100px; | |
height: 200px; | |
background-color: darkseagreen; | |
float: left; | |
} | |
.right { | |
height: 200px; | |
background-color : cornflowerblue; | |
// 触发BFC 让这个div不和左边的的div重叠 | |
overflow: hidden; | |
} | |
</style> | |
<body> | |
<div class="container"> | |
<div class="left">left</div> | |
<div class="right">right</div> | |
</div> | |
</body> |
# 处理 margin 重叠
因为同一 BFC 下的相邻块级元素会发生垂直方向的外边距折叠,所以只要让两个块元素不在同一个 BFC 下就可以处理 margin 重叠的问题了
兄弟元素间的 margin
重合
<style> | |
.p { | |
background: aquamarine; | |
margin: 100px 0; | |
height: 100px; | |
} | |
.wrapper { | |
// 触发BFC | |
overflow: hidden; | |
} | |
</style> | |
<body> | |
<p class="p">p1</p> | |
<div class="wrapper"> | |
<p class="p">p2</p> | |
</div> | |
</body> |
父子元素间的 margin
重合
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Title</title> | |
<style> | |
.p { | |
background: aquamarine; | |
margin: 100px 0; | |
height: 100px; | |
} | |
.wrapper { | |
overflow: hidden; | |
margin-bottom: 100px; | |
} | |
</style> | |
</head> | |
<body> | |
<!-- <p class="p">p1</p>--> | |
<div class="wrapper"> | |
<p class="p">p2</p> | |
</div> | |
<div>rua</div> | |
<!-- <p class="p">p1</p>--> | |
</body> | |
</html> |
# 处理浮动引起的高度塌陷
这里使用的是计算 BFC 元素的高度时,浮动元素也会参与计算这个特性。
<style> | |
.container { | |
border: 1px solid black; | |
overflow: hidden; | |
} | |
.left { | |
width: 100px; | |
height: 150px; | |
background-color: darkseagreen; | |
float: left; | |
} | |
</style> | |
<body> | |
<div class="container"> | |
<div class="left">left</div> | |
</div> | |
</body> |
# 参考链接
MDN-BFC
MDN-IFC
MDN-forrmat context
行内格式化上下文介绍
什么是 BFC