一、传统网页布局的三种方式：
1.标准流：用标签按照规定好的默认的方式排列。
如：块级元素独占一行，可以设置宽高，从上到下开始排列；
div\hr\p\h1-h6\ul\ol\dl\form\table。
行内元素一行多个；行内块元素一行多个，可以设置宽高，从左到右开始排列。
span\a\i\em。
2.浮动布局
3.定位布局。
二、浮动特性
1.浮动特性：
a 脱离标准流；（脱离原来的标准流属性，比如块级元素独占一行，浮动之后，块级元素可以一行多个显示）
b 不占据原来的位置。
2.浮动盒子是按照顶部对齐显示的，跟盒子的高度无关。
3.浮动的盒子一行显示不下来，会掉到第二行下来显示，会以上一个元素的底边为标准，碰到壁就停下来靠着。
4.浮动的盒子之间不会有缝隙。
5.浮动元素会具有行内块元素的特性。
任何元素都可以浮动。不管元素是什么模式的元素，添加浮动之后具有行内块元素相似的特性。
如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动之后，它的大小根据内容来决定。
6.浮动的盒子只会影响浮动盒子后面的标准流。
三、浮动结合标准流元素进行网页布局
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。符合网页布局的第一准则。
四、清除浮动
1.清除浮动的本质：
清除浮动元素脱离标准流造成的影响。
2.清除浮动策略：
a 隔墙法：在最后一个浮动的元素后面加一个额外块级标签（这个块级元素不能有任何属性），然后给这个块级元素样式中添加 clear:both;属性。
此法在页面中多加了一个不必要的标签，影响了页面结构。
b.overflow:hidden;
找到浮动元素的父级元素，在（亲父亲）父级元素里面添加overflow:hidden; 属性。
缺点：如果浮动元素里有超出父级元素的部分，超出的部分会被隐藏掉。
c.伪元素清除浮动，先写上清除浮动代码，之后找到浮动元素的（亲父亲）父级，给（亲父亲）父级加上类名，clearfix。
