float 文档流
float : left | right | none | inherit
文档流是文档中可显示对象在排列时所占的位置
浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来
clear:left | right | both | none | inherit ; 元素的某个方向上不能有浮动元素
clear:both; 在左右两侧均不允许浮动元素
float 的特征
1 块在一排显示
2 内联支持宽高
3 默认内容撑开宽度
4 脱离文档流
5 提升层级半层
清除浮动方法
1 加高
问题：扩展性不好
2 父级浮动
问题： 页面中所有元素都加浮动，margin左右自动失效
3 inline-block 清除浮动方法：
问题：margin左右auto失效
4 空标签清浮动
问题：IE6最小高度19px：解决后IE6下还有2px偏差
5 br清除浮动
问题：不符合工作中，结构，样式，行为，三者分离的要求
6 after伪类清除浮动方法（现在主流方法）
content:"";
display:block;
dear:both;
}
.clear{
zoom:1;
}
对上面代码的部分注释：
BFC（block formatting context)标准浏览器,下面的属性能够触发此类浏览器
a,float的值不为none
b,overflow的值不为visible
c,display的值为为table-cell,table-caption,inline-block中的任何一个
d,position的值不为relative和static
e,width|height|min-width|min-height(!aotu)
haslayout IE浏览器，下面的属性能够触发此类浏览器
a,writing-mode:tb-rl
b,-ms-writing-mode:tb-rl
c,zoom:(!normal)
7 overflow:hidden 清除浮动方法
问题：需要配合宽度或者zoom兼容ie6 ie7
进一步了解overflow
overflow:scroll | auto | hidden;
overflow:hidden:溢出隐藏（裁刀!）