浮动float
文档流
文档中可显示对象在排列时所占用的位置
浮动的定义
使元素脱离文档流，按照指定的方向发生移动，遇到父级边界或者相邻的浮动元素停下来
float特征
- 块级元素在一排显示
- 内联元素支持宽高
- 默认内容撑开宽度
- 脱离文档流
- 提升半个层级
clear清除浮动
元素的某个方向上不能有浮动元素
clear left/right/both/none/inherit
清除浮动的方法
1.给父级加高度
问题是扩展性不好
2.给父级加浮动
问题是页面中所有元素可能都要加浮动，margin左右自动失效
3.给父级设置 display：inline-block
问题是 margin左右auto失效
4.空标签清浮动
在浮动元素旁边新建空标签并给其添加样式clear：both；达到给浮动元素清除浮动的效果。
问题是IE6最小高度19px;解决后还有2px的偏差，而且设置空标签不符合标准，不建议使用
5.<br>清浮动
在浮动元素下面加<br clear="all"/>
问题是不符合工作中结构、样式、行为三者分离的要求
6.overflow清除浮动
给浮动元素的父级添加overflow：hidden；
overflow:hidden;溢出隐藏
overflow:scroll;以滚动条形式出现
7.建议使用：after伪类清除浮动
伪类：元素内部末尾添加的内容。
设置zoom,并将after内的content设为空。
伪类清除浮动，例如:
.clearfix{ *zoom:1; }
.clearfix:after{
content:"";
display:block;
clear:both;
}
