CSS 传统网页布局三种方式（PC端）※

1、标准流（普通流、文档流）

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

1.1 块元素独占一行，从上向下
常用元素：div、hr、p、h1~6、ul、ol、dl、form、table

1.2 行内元素按照顺序从左到右排序，碰到父元素边缘则自动换行
常用元素：span、a、i、em…

2、浮动（float）

多个块级元素纵向排列用标准流，多个块级元素横向排列用浮动 ※

2.1 语法
选择器{float:属性值;}

2.2 特性（重难点）

• 浮动元素会脱离标准流（托标），位置不保留；
• 如果多个盒子都设置了浮动，则她们会按照属性值一行内显示，并且顶端对齐排列；
• 浮动元素会具有行内快元素特性。

2.3 技巧
1）常与标准流父级搭配使用
为了约束浮动元素位置，一般先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。

2）若同样式一行排列，可用 li 浮动。（注意权重问题）

2.4 清除浮动（clear）

原因：父元素往往不能固定高度，而子元素float之后，父元素又没有高度，会出问题。
语法：选择器