传统网页布局的三种方式（PC）

• 浮动特性

• 定位特性

• 普通流或标准流

（没错，是篇水文）

一 、 标准流：

标签按照规定好默认方式排列。

例如：对于块内元素：独占一行，从上往下进行排列

常用的元素有：div\h1~h6\p\ul\ol\dl\form\table

对于行内元素，会按照顺序从左向右进行顺序排列，碰到父元素则会自动进行换行。

常用：span\a

对于行内块元素：即具有行内元素的特点又具有块内元素的特点（比如，可以克服给行内元素单独设置行高等信息）

二、 浮动特性

相当于在普通标准流元素的基础之上浮动了一层，下层是标准流的元素第二层是浮动的元素。

如果行内元素添加了浮动特性则不需要再添加行内块的标签，其自然拥有这样的特性。并且克服了不能在一行中排列多个块级元素的缺陷（如果转化为行内块可以实现，但是会有认为不可控制的块间空隙出现）。

浮动特性之脱标

浮动特性之一行内显示

浮动特性之具备行内块元素特性

ps:常见用法

网页布局两大准则：

1. 标准流的盒子是上下进行排列，浮动的盒子是左右进行排列

2. 先设置盒子大小。再设置盒子位置

三、 定位特性