文字環繞效果
block formatting context 【塊級格式化上下文】
元素使用了float屬性之後，可以使該元素脫離標準流，浮動在其他元素之上，不再佔據原本的空間，會導致後面的元素上移並占用該元素原本的空間。
float屬性僅對使用該屬性的元素本身以及後面的元素產生影響（後面元素會上移-->頁尾塊上移）
不設定div寬度時，div預設寬度是width：auto；自動調整寬度至最大，
設定float屬性之後，div的寬度自動調整至最小（自動收縮並始終包裹住子元素）
div1
內容
div1
內容
div1
內容
未float之前：
float之後：
很明顯：div.image的寬度縮小了！
塊級元素如果不設定float，它缺省會撐滿整個螢幕，而如果設定了float，則只會包裹住其內容。這就是float的包裹性！！！
設定了float的元素會脫離文件流，會導致其父元素出現「坍塌」的現象。不錯，這就是它的破壞性！！！
1.clear：both屬性；html層面：在底部增加乙個空div，或者css after偽元素底部生成（但是ie6/ie7不支援）
2.父元素bfc(ie8+)或haslayout(ie6/ie7)
bfc/haslayout通常宣告
float:left/right
position:absolute/fixed
overflow:hidden/scroll(ie7+)
display:inline-block/table-cell(ie8+)
width/height/zoom:1/...(ie6/ie7)
但是bfc/haslayout是不能一方通行的，存在相容性問題，而zoom1是現代瀏器不認可的，以下為折中方法
權衡策略：
.clearfix:after/* 用於ie8 */.clearfix/* 用於ie6/ie7 */.clearfix
藍色部分為換行符產生的空白間距
按鈕浮動之後，空格消失，現象1
去掉換行符，並新增 空格，
效果
按鈕float之後，現象2
原因： 實際上就是字元，float設計初衷就是為了實現文字環繞效果， 作為字元跟隨在float元素後面
效果等價於下圖的**
現象1和現象2的區別就在於：上下按鈕之間是否留有間距。那麼原因是什麼呢？
其實那不是間距 是 由於 空格帶來的基線冗餘 實際是行距 刪除空格 或者 將文字大小font-size:0即可
文字環繞衍生：單側固定
CSS深入理解之float
float 屬性定義元素在哪個方向浮動。產生之初這個屬性總應用於影象，使文字圍繞在影象周圍，不過在 css 中，任何元素都可以浮動。浮動元素會生成乙個塊級框，而不論它本身是何種元素。如果浮動非替換元素，則要指定乙個明確的寬度 否則，它們會盡可能地窄。讓設定的標籤產生浮動效果，就是脫離原來頁面的標準輸...
深入理解css之float
在css中，是存在流的概念的。在正常情況下，頁面總是從左到右，從上到下布局，這種被稱為正常的流。但是有很多情況，正常流是沒辦法實現的，因此我們需要一些手段來破壞流，從而實現一些特殊的布局，而本節的主角float就具備破壞流的特性。很多新手在布局的時候，總喜歡用float來實現。例如乙個三欄布局，左右...
學習筆記 CSS深入理解之float
張鑫旭的css深入理解之float浮動學習筆記float為產生文字環繞效果而生 包裹 即產生乙個bfc 破壞 使父容器塌陷，元素脫離文件流，產生inline boxes環繞 方式一 使用clear，類似於產生乙個連線索道，使前文和後文關聯，會產生margin重疊效果。方式二 父容器bfc或者hasl...