CSS 布局模型

css包含3种基本的布局模型即为元素的3中布局模型,分别为 Flow/Float/Layer

Flow(流动模型)

标准文档流方式，元素从上至下，从左至右！是默认的网页布局方式

特点

• 块状元素占据单独的一行，从上至下排列
• 内联元素会从左至右排列

Float(浮动模型)

网页元素可通过设置float属性值浮动，利用浮动特性布局

Layer(层模型)

设置网页元素position来支持层布局模型

position: static

position 默认值,网页元素仍然处于标准文档流中,占据文档流中的位置

position: relative

特点：

• 相对于自身原有位置进行偏移
• 仍然处于标准文档流中
• 随即拥有偏移属性和z-index 属性

position: absolute

特点：

• 建立了以包含块为基准的定位（包含块为距离其最近设置了定位属性的上级元素,
  若无定位祖先元素，则以HTML元素为定位元素）
• 完全脱离了标准文档流
• 随即拥有偏移属性和 z-index 属性
• 未设置偏移量时，无论是否存在已定位祖先元素，都保持在元素初始位置

position: fixed

特点：

• 完全脱离标准文档流
• 随机拥有偏移属性和 z-index 属性
• 无论有无已定位祖先元素，均以浏览器窗口为偏移参照基准
• 位置固定，不会随滚动条变化
• 未设置偏移量时，仍然在标准文档流原位置