在了解定位体系之前首先先了解关于一下
一、视觉格式化模型
视觉格式化模型(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的功能