文章出處

css float

定義元素浮動到左側或者右側。其出現的本意是讓文字環繞圖片而已。

left、right、inherit（從父級元素獲取float值）、none

一、浮動的性質

1. 包裹性

　　display:inline-block某種意義上的作用就是包裹(wrap)，而浮動也有類似的效果。舉個常見例子，或許您有實現寬度自適應按鈕的經驗，實現寬度自適應的關鍵就是要讓按鈕的大小自適應于文字的個數，這就需要按鈕要自動包裹在文字的外面。我們用什么方法實現呢？一就是display:inline-block；二就是float。

　　浮動屬性（無論是左浮動還是右浮動）某種意義上而言與display:inline-block屬性的作用是一模一樣的

　　區別：浮動的方向性

　　display:inline-block僅僅一個水平排列方向，就是從左往右，而float可以從右往左排列

2. 破壞性

　　2.1 float元素不占據正常文檔流空間

　　　　由于浮動塊不在文檔的普通流中，所以文檔的普通流中的塊表現得就像浮動塊不存在一樣。

　　　　3塊div均未加float

　　　　塊1享有浮動，脫離文檔流并且向右移動

　　　　　塊1向左浮動。IE8和Firefox中因為它不再處于文檔流中，所以它不占據空間，實際上覆蓋住了塊2，使塊2從視圖中消失。而IE6和IE7中緊跟在浮動元素塊1的塊2也會跟著浮動。如下圖

　　2.2 浮動“塌陷”

　　　　對父元素的影響：如果父元素只包含浮動元素，且父元素未設置高度和寬度的時候。那么它的高度就會塌縮為零。

　　　　此類情況出現原因

　　　　浮動的“本職工作”：文字環繞顯示；“非本職工作”：列表布局；證據：高度塌陷

　　　　所以浮動元素塌陷的問題根本就不是瀏覽器的bug，而是我們沒有正確地深入地了解浮動，是我們自己使用不當，因為浮動本不應該用在這里的。

　　　　解決方案

　　　　① 在使用float元素的父元素結束前加一個高為0寬為0且有clear:both樣式的div

<div>
    <div><span>塊1</span> float:left </div>
    <div><span>塊2</span> float:left</div>
    <div><span>塊3</span> float:left</div>
    <div></div>
</div>