本文深入探讨CSS中的视觉格式化模型，解析包含块概念，并详细阐述三种定位体系——常规流、浮动和绝对定位。了解元素在不同定位体系下如何确定尺寸和位置，以及如何通过position和float属性切换定位体系。对于前端开发者来说，掌握这些基础知识至关重要。
在了解定位体系之前首先先了解关于一下
一、视觉格式化模型
视觉格式化模型（visual formatting model）
CSS的一种机制，它规定了页面中的多个盒子如何布局
视觉格式化模型要求，所有的元素必须放置在它的包含块中，元素在包含块中的尺寸和位置，主要受到两个因素的影响：
- 元素的盒模型
- 元素的定位体系
包含块（containing block）
每个元素都有一个包含块注，它是指元素在页面中摆放的区域（html的包含块是初始化包含块initial containing block）
通常情况下，元素的包含块是它父元素的内容盒（content-box）[浮动 常规流]
注:当定位体系发生变化时，元素的包含块就不一定是它的父元素的内容盒
三种定位体系
- 常规流（normal flow）普通流
- 浮动（float）
- 绝对定位（absolute positioned）
任何一个元素，必须属于其中一种定位体系
不同的定位体系中，元素在包含块中的尺寸和位置会有一些差异
定位体系判断的步骤（默认情况下，元素为常规流定位）
二、定位体系判断
绝对定位
判定元素的position属性值是不是以下的取值：
absolute（绝对位置）、fixed（固定位置）
如果是其中某一个取值，则当前元素就属于“绝对定位”
position默认值：static，position不能继承
注：position还有一个取值relative相对定位
属于常规流
浮动
判定元素的float属性值是不是以下的取值：
left（左浮动）、right（右浮动）
如果是其中某一个取值，则当前元素就属于“浮动”
float默认值：none，float不能继承
注：浮动最初的目的只是为了实现文字环绕
用于横向布局有很多的弊端
若想使元素并排 弹性布局（display：flex）可以实现float的功能
111
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
