淺談css中浮動(dòng)和清除浮動(dòng)帶來(lái)的影響
有很多時(shí)候，我們都會(huì)用到浮動(dòng)，而我們有時(shí)候?qū)Ω?dòng)只是一知半解，卻不是太清楚它到底是怎么回事，不知道各位有沒(méi)有和我一樣的感覺(jué)，只知道用它，卻不知道它到底是怎么回事，所以，在學(xué)習(xí)的過(guò)程中，就要把一個(gè)概念不是很清晰的問(wèn)題把它弄清楚了，便于我們以后的使用。早些時(shí)候，W3C規(guī)定出來(lái)的浮動(dòng)實(shí)際并不是為了布局所用，當(dāng)時(shí)是為了做文字環(huán)繞才使用到浮動(dòng)，后來(lái)有人發(fā)現(xiàn)用它來(lái)做布局也挺不錯(cuò)啊，但是，用到了浮動(dòng)，是要付出一定的代價(jià)的，我們就必須要處理浮動(dòng)所帶來(lái)的影響。接下來(lái)我們就聊聊浮動(dòng)的那些事兒，此分享僅供參考，有什么不足的地方希望各位博友指正！
首先我們要知道，css中的塊級(jí)元素在頁(yè)面中是獨(dú)占一行的，自上而下排列，也就是我們所說(shuō)的流，通常我們稱之為標(biāo)準(zhǔn)流，在這里我以div為例，div是塊級(jí)元素，如下圖。
可很清楚的看得到，div是獨(dú)自占用一行的，div2和div3是不會(huì)排在div1后面，這是在標(biāo)準(zhǔn)流中的理論，但是，有些時(shí)候，我們的需求不僅僅是這樣，我們想著如何在一行中顯示多個(gè)div元素，所以，標(biāo)準(zhǔn)流已經(jīng)不能滿足我們的需求，這個(gè)時(shí)候我們就需要用到浮動(dòng)，我們這樣理解，浮動(dòng)就是讓這個(gè)div元素脫離標(biāo)準(zhǔn)流，漂浮在標(biāo)準(zhǔn)流的上面?，F(xiàn)在，我給div2加上一個(gè)向左的浮動(dòng)，給個(gè)fload：left；然后來(lái)看看會(huì)發(fā)生什么，看圖吧，上效果低千言萬(wàn)語(yǔ)！
如圖可以看出，黃色的div不見(jiàn)了，其實(shí)它并不是不見(jiàn)了，而是跑到了綠色盒子的下面，這個(gè)時(shí)候我們就要想到了，因?yàn)槲覀兘o了div2向左浮動(dòng)，div2已經(jīng)脫離了標(biāo)準(zhǔn)流，相當(dāng)于它已經(jīng)和黃色盒子、紅色盒子不在一個(gè)層次上，所以，黃色盒子就會(huì)頂上去跑到綠色盒子的下面，占據(jù)著綠色盒子的位置，就是我們現(xiàn)在看到的效果。好，理解了上面的，讓我們接著來(lái)，現(xiàn)在我給黃色盒子和綠色盒子都加上左浮動(dòng)，再看看效果：
現(xiàn)在我們看到div2和div3都脫離的標(biāo)準(zhǔn)流，此時(shí)，div3發(fā)現(xiàn)div2也是浮動(dòng)的，所以div3就會(huì)跟隨著div2之后，而div2發(fā)現(xiàn)上邊的元素div1是標(biāo)準(zhǔn)流中的元素，因此div2的相對(duì)垂直位置不會(huì)改變，頂部仍然和div1元素的底部對(duì)齊，由于是左浮動(dòng)，所以，左邊的div2在最左邊。
接下來(lái)我們來(lái)看看不同的：
如果我把div2和div3都設(shè)置成右浮動(dòng)的話，看圖如下：
現(xiàn)在我們可以看到，div2和div3都漂浮到了最右邊。但是有一點(diǎn)我們可以發(fā)現(xiàn)，因?yàn)槭窍蛴腋?dòng)，右邊是最前，所以div2會(huì)第一個(gè)向右浮動(dòng)，div3隨著緊跟div后面向右浮動(dòng)，這個(gè)時(shí)候就很容易的理解了，由于div1是在標(biāo)準(zhǔn)流上，它是獨(dú)自占用一行的，所以div2和div3不會(huì)跑到上面去。
為了方便理解，讓我們?cè)倏匆粋€(gè)例子，如圖：
現(xiàn)在我有四個(gè)div，現(xiàn)在他們分別沒(méi)有浮動(dòng)，都在標(biāo)準(zhǔn)流里，每個(gè)div獨(dú)占一行，現(xiàn)在我給div2和div4分別加一個(gè)左浮動(dòng)，然后給div3增加50px的寬度，便于理解，來(lái)看看效
