深刻理解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+或haslayoutIE六、7
方法差別 clear,好像在橋樑，在兩端搭建一個橋樑，有margin重疊等等特性
BFC像是一個封閉的通道，和外面是隔絕的，保護裏面的任何聲明不對外面有任何的影響。
clear一般應用形式，1.HTML block水平元素底部走起

2.CSS after僞元素底部走起
不足：第一種div元素-裸露的div元素看起來影響觀瞻
第二種在IE六、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每每會讓IE六、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.浮動元素和文本不在同一行的問題

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