视觉格式化模型
日常开发中的代码并不会直接作用于页面的，是需要浏览器渲染解析（浏览器渲染原理参考文章：juejin.cn/post/731950… ） 在浏览器解析中有一步是样式计算，计算之后就是布局，布局所依靠是视觉格式化模型、参考文章：juejin.cn/post/732153…
视觉格式化模型分为：
- 常规流
- 浮动流
- 定位流
视觉格式化模型规则主要分为
BFCIFC
本文主要介绍BFC
BFC（块级格式化上下文）
全称Block Formatting Context，简称BFC
它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局。
回顾常规流块盒布局规则：
- 水平方向上必须撑满包含块
- 常规流块盒在包含块的垂直方向上依次摆放
- 常规流块盒若外边距无缝相邻，则进行外边距合并
- 常规流块的自动高度和摆放位置，无视浮动、定位元素
BFC渲染区域：
由这个区域的某个HTML元素创建的，以下元素会在HTML内部创建BFC渲染区域：
- 根元素 意味着
<html>元素创建BFC区域，覆盖了网页中所有元素 - 浮动元素和绝对定位元素
overflow不等于visible的元素display：table；不常见display：inline-block不常见
如上图所以不同的BFC渲染区域渲染时互不干扰。
创建BFC的元素、隔绝了内部和外部的联系，内部的渲染不会影响到外部
创建了BFC的元素有如下渲染规则:
- 创建了
BFC的元素，它的自动高度需要计算浮动元素 （BFC解决浮动元素高度塌陷问题的原理） - 创建了
BFC的元素，它的边框盒不会与浮动元素重叠 （创建了BFC的元素会避开浮动元素） - 创建了
BFC的元素，不会和它的子元素进行外边距合并 （BFC可以解决边距合并问题的原理）
