1.标准流
所谓的标准流：就是标签按照规定的默认方式排列
- 块级元素：会独占一行，从上向下顺序排列
- 常用元素：
div 、 hr 、 p 、 h1~h6 、 ul 、 ol 、 form 、 table
- 行内元素：会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行
- 常用元素：
span 、 a 、 i 、 em 等以上都是标准布局，标准流是最基本的布局方式。 这三种布局方式都是用来摆放盒子的，盒子摆放到合适的位置，布局自然就完成了。
！！注意：
实际开发中，一个页面基本都包含了这三种布局方式。
2.浮动
总结：
有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可改变元素标签默认的排列方式。
浮动最典型的应用：
可以让多个块级元素一行内排列显示。
网页布局第一准则：
多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
float 属性用于创建浮动框，将其移到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘
语法:
选择器 { float: 属性值; }
float属性值
| 属性值 | 描述 |
|---|---|
none | 元素不浮动(默认值) |
left | 元素向左浮动 |
right | 元素向右浮动 |
注意：
加了浮动之后的元素，会具有很多特性需要我们掌握的
- 浮动元素会脱离标准流（脱标）
- 浮动的元素会具有行内块元素的特性
- 浮动的元素会一行内显示并且元素顶部对齐
加了浮动后出现的特性
- 脱离标准普通流的控制（浮）并移动到指定位置（动），（俗称脱标）
- 浮动的盒子不再保留原先的位置
浮动的特性：
- 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列
注意：浮动的元素是相互贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。 任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。
- 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但添加浮动后，它的大小根据内容来决定
- 浮动的盒子中间是没有缝隙的，是紧挨着一起的 行内元素原理： 2、为了约束浮动元素位置，我们网页布局一般采取的策略是： 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。 符合网页布局。
