一、浮动（float）
1、传统网页布局的三种方式：普通流（标准流）、浮动、定位
2、标准流：标签按照规定好默认方式排列
3、为什么需要浮动？
- 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
4、什么是浮动？
选择器{float：属性（left/right）}
5、浮动特性（重难点）
- 浮动特性会脱离标准流（1.脱离标准普通流的控制(浮)移动到指定位置（动），脱标 2.浮动的盒子不再保留原先的位置）
- 浮动的元素会一行内显示并且元素顶部对齐
- 浮动的元素会具有行内块元素的特征（任何元素都可以添加浮动）
6、浮动元素经常和标准流父级搭配使用：
- 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
二、浮动布局注意点
- 浮动和标准流盒子搭配使用
- 一个元素浮动了，理论上其他兄弟元素都浮动（浮动标准只会影响后面的标准流）
三、清除浮动
1.为什么要清除浮动？
- 父亲标准流高度不够 浮动盒子占用多 会影响下面标准流盒子
2.清除浮动的本质：清除浮动元素造成的影响，如果父盒子有高度 则不需要清除浮动
选择器{clear：both；}
- 清除浮动的策略是闭合浮动
3.清除浮动的方法
1.额外标签法 最后一个浮动元素后面添加空标签（必须是块级元素）
<ul >
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<br style="clear:both">
</ul>
2.父级添加overflow属性 ，属性值为hidden，auto，scroll
此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow:auto，即可!overflow:auto;是让高度自适应，zoom:1;是为了兼容IE6，也可以用height:1%;的方式来解决，注意，zoom不符合W3C标准。overflow:hidden也可以实现。
<ul style="overflow:auto;zoom:1>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
3.父级添加after伪元素：
after伪对象非IE浏览器支持，所以并不影响到IE/WIN浏览器。具体写法可参照以下示例。使用中需注意以下几点。
一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；
二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为"."，
.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 {
/* IE6,7专有 */ *zoom:1;
}
总结
重点 掌握浮动的特性，掌握为什么要清除浮动，掌握四种清除浮动的方法即原理
