CSS—BFC&视觉格式化模型

目录

一、BFC

二、视觉格式化模型

---

一、BFC

BFC全称Block Formatting Context，翻译为块格式化上下文，是由CSS2.1规范定义的一个关于CSS渲染定位的概念。BFC是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。

如下所示为，触发一个盒子的bfc，将其转化为bfc元素的方法。

方法一: position:absolute/fixed;
方法二: display:inline-block/table-cell/flex/inline-flex;
方法三: float:left/right;
方法四: overflow:hidden;

二、视觉格式化模型

视觉格式化模型是用来处理文档并将它显示在视觉媒体上的机制，是CSS中的一个概念。视觉格式化模型定义了盒的生成，盒主要包括了块盒、行内盒、匿名盒（没有名字不能被选择器选中的盒子）以及一些实验性的盒子（未来可能添加到规范中）。盒的类型由display属性决定。