区块格式化上下文到底是什么?
MDN上面这么解释:区块格式化上下文(Block Formatting Context,BFC)是 Web 页面的可视 CSS 渲染的一部分,是块级盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。依我理解其实就是页面上的一块隔离独立的渲染区域,跟相邻元素的布局不互相影响。
哪些方式会创建块格式化上下文?
- 文档的根元素(
<html>
)。 - 浮动元素。
- 绝对或固定定位的元素。
- 行内块元素:display:inline-block。
- display值为flow-root,flex, grid等等
- 设置了overflow不为visible
在布局中格式化上下文能解决什么问题?
- 包含内部浮动
- 排除外部浮动
- 解决外边距折叠问题