传统页面布局的三种方法
网页布局的本质就是用CSS来放盒子，把盒子放到对应的位置上。CSS提供了三种传统布局的方式(简单来说就是如何把盒子排列):
- 普通流(标准流)
- 浮动
- 定位
普通流(标准流)
所谓标准流就是标签按照规定默认排列。
- 块级元素会独占一行，从上到下依次排列。常见的有：div、p、h1-h6、ul等
- 行内元素会按照从左到右的顺序排列，碰到父元素的边缘自动换行。常见的有：span、a、i等 以上就是标准流布局，标准流布局就是最基本的布局方式
浮动
在开发的过程中，光靠标准流是很难的，有很多布局无法实现。这时就需要利用浮动来完成，浮动可以改变元素标签的默认排列方式。
什么是浮动？
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
给元素添加了浮动属性，会有很多特性。
首先就是浮动的元素会脱离标准流的控制，移动到指定的位置。浮动盒子原先的位置不会保留。简单的说就是，浮动元素会飞起来，它原本的位置会被后面的元素所占据。
浮动的元素会一行内显示并且元素顶部对齐，即多个盒子设置了浮动，它们会按照属性值一行内显示并且顶端对齐排列。浮动的元素是互相紧贴在一起的，不会有缝隙。如果父级元素装不下这些盒子，多出的盒子会另起一行对齐。
浮动的元素会具有行内块元素的特性
任何元素都可以浮动，不管之前是什么模式的元素，添加浮动之后具有行内块元素相似的特性。
- 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动属性后，它的大小就要根据内容来决定。
- 浮动的盒子没有缝隙，紧挨在一起。
- 行内元素也是如此
清除浮动本质
浮动有时候也会带来一些麻烦，并不是万能的。所以，有时候我们要清除元素的浮动。
- 清除浮动的本质就是清除浮动元素造成的影响
- 如果父盒子本身有高度，那么就不需要清除浮动
- 清除浮动之后，父盒子就会根据浮动的子盒子自动检测高度。父盒子有了高度，就不会影响下面的标准流
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| rigth | 不允许右侧有浮动元素（清除右侧浮动的影响 |
| both | 同时清除左右两侧浮动的影响 |
清除浮动的方法
- 额外标签法
额外标签法就是在最后一个浮动元素后面添加一个空标签(该标签一定要是块级元素)。如：
<div style='clear:both'></div>比较通俗易懂书写也方便，但是添加了无意义的标签，改变了DOM的结构。 - 父级添加overflow属性
可以给父级添加overflow属性，将其值设置为hidden，auto或者scroll，最常见的就是设置为
overflow:hidden代码比较简洁，但是无法显示溢出的部分 - 父级添加:after伪元素 给父级添加伪元素是额外标签法的升级版，相当于在生成了一个空盒子。没有增加标签，也没有改变DOM结构。
- 父级添加双伪元素 双伪元素和添加伪元素原理类似，只不过是在父元素的前面和后面都添加一个空盒子而已。
