css浮動（float：none | left | right）在網(wǎng)頁布局中我們經(jīng)常使用的屬性，也是經(jīng)常會出現(xiàn)Bug的地方。
首先我們要搞清楚為什么要用到float呢?
網(wǎng)頁布局中塊級元素，在頁面中獨(dú)占一行，自上而下排列，也就是傳說中的文檔流。
可是我們要實(shí)現(xiàn)左右模塊該怎么實(shí)現(xiàn)，這就需要用到float了，當(dāng)我把第三個設(shè)置左浮動
我們通過調(diào)整透明度知道，第三個是漂浮在第四個上面的，但是第四個的文字會被擠到第三個后面。我們看到第三個元素并沒有浮動到第一個和第二個元素上而是浮動到第四元素上，所以浮動只遮蓋后面的元素并把元素內(nèi)部的文本擠到周邊。
然后我們在測試第四個也設(shè)置左浮動
我們發(fā)現(xiàn)第四個并沒有浮動到第三個的上面，而是跑到了第三個后面。所以浮動元素在碰到同樣是浮動元素的時候會停止浮動。
下面我將第二個和第四個右浮動
右浮動和左浮動都是一樣的只對后面的元素有影響，碰到同樣是浮動元素的時候會停止浮動。
我們在測試將第三個浮動取消
我們發(fā)現(xiàn)和上個測試的區(qū)別，第四個沒有緊挨著第二個，而是在第三個下邊。從而說明浮動并不能影響他上面的元素。
可是在做網(wǎng)頁布局的時候不想浮動元素影響遮蓋下一個元素該怎么解決？
這個時候就需要我們清除浮動（clear：both | left | right）
上面的例子 希望第三個左浮動，第二個和第四個右浮動，第五個不受影響在最下面。
首先我們要清楚要在那個元素上加清除浮動。我要第五個不受浮動影響，那我就在第五個上加清除浮動，是清除左浮動還是右浮動？誰蓋住你 你就清誰的，要是不確定就直接 clear：both
本文章著作權(quán)歸 杜憲 和饑人谷(QQ 群: 222459918) 所有，轉(zhuǎn)載須說明來源
