深入理解css之float

1.float的历史
float的设计的初衷：文字环绕效果
2.包裹与破坏
增强浮动的感性认知
包裹：1.收缩 2.坚挺 3.隔绝 里面的布局和外面一点关系都没有
包裹的特性就是BFC block formatting context-块级格式化上下文
具有包裹性的其他元素
display:inline-block/table-cell
position:absolute/fixed/sticky
破坏：容器被破坏，父级元素的高度坍塌
其他具有破坏性的元素
display:none
position:absolute(近亲)/fixed/sticky
3.浮动是魔鬼——无宽度、无图片、无浮动（新三无）
为何浮动要带来破坏——置之死地而后生
被误解的float
浮动具有破坏性，会让父元素高度塌陷
如何解决让父元素高度塌陷的bug？这个不是bug，而是标准 浮动的原本作用是仅仅是为了实现文字环绕效果
结论：浮动的破坏性知识单纯为了实现文字环绕效果而已，因此 父容器高度塌陷不是bug，特性使然。
4.清除浮动
清除浮动带来的影响
方法一，在脚底插入一个clear:both的元素
方法二，父元素BFC IE8+或haslayoutIE6、7
方法差异 clear,好像在桥梁，在两端搭建一个桥梁，有margin重叠等等特性
BFC像是一个封闭的通道，和外面是隔绝的，保护里面的任何声明不对外面有任何的影响。
clear通常应用形式，1.HTML block水平元素底部走起

2.CSS after伪元素底部走起
不足：第一种div元素-裸露的div元素看起来影响观瞻
第二种在IE6、7中兼容性问题。
BFC/haslayout通常声明
.float:left/right
.position:absolute/fixed
.overflow:hidden/scroll(IE7)
.dispaly:inline-block/table-cell(IE8+)
.width/height/zoome:1/...(IE6\7)
不足：无法“一方通行”，不可能所有元素都浮动，都绝对定位
你我相逢不相识zoom:1,兼容性很好，但是绝大多浏览器是不认识的。
权衡后的策略
.clearfix:after{
content:'';display:block;height:0;overflow:hidden;clar:both;
}
.clearfix{zoom:1;}
更好的方法
.clearfix:after{content:''; dispaly:table;clear:both;}
.clearfix{zoom:1;}
切勿滥用！clearfix 应用在包含浮动子元素的父级元素上。乱入的haslayout往往会让IE6、7做出出格的事情
浮动也会触发haslayout 所以，浮动在ie6\7下更显魔性
5.float的滥用——不在其职而谋其政
1.元素block块状化
2.破坏性造成的紧密排列特性（去空格化）
6.float与流体布局
文字环绕衍生-单侧固定
width+float
padding-left/margin-left
DOM与显示位置匹配的单侧固定布局
width:100% + float
padding-left/margin-left
width+float+margin负值
智能自适应布局
float
display:table-cell IE+
display:inline-block IE7
float与兼容性
IE7的浮动问题
1.含clear的浮动元素包裹不正确的问题；
2.浮动元素倒数2个莫名垂直间距问题
3.浮动元素最后一个字符重复问题
4.浮动元素楼梯排列问题
5.浮动元素和文本不在同一行的问题

		合理使用浮动，且用且珍惜。。。--------