主要是三种方式实现网页布局，分别是标准流、浮动和定位。
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
浮动（float）的元素最重要的特性：
1、脱离标准普通流的控制（浮）移动到指定位置（动），（俗称脱标）
2、浮动的盒子不再保留原先的位置。
如果行内元素有了浮动，则不需要转换块级/行内块元素就可以直接给高度和宽度。
任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。
如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定。
浮动的盒子中间是没有缝隙的，是紧挨着一起的。
浮动的盒子通常是和标准流的父盒子来搭配。先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。
为什么需要清除浮动？
由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0，就会影响下面的标准流盒子。
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。
清除浮动的本质是清除浮动元素脱离标准流造成的影响。
清除浮动策略是闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。
清除浮动的方法：
1、额外标签法（隔墙法），就是在最后一个浮动的子元素后面添加一个额外标签（额外标签必须为块级元素），添加清除浮动样式（clear:both)
2、父级添加overflow属性，将其属性值设置为hidden、auto和scroll（缺点：无法显示溢出的部分）
3、清除浮动———— :after伪元素法（额外标签法的升级版），可以在使用的时候直接复制，然后直接调用
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility:hidden;
}
.clearfix { /* IE6、7专有*/
*zoom: 1;
}
4、双伪元素清除浮动
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
