在做一些練習題時發現一個初學者經常犯的一些錯誤：對浮動和定位都很理解，知道怎麼使用，但是一旦做東西的時候，為什麼編寫出來的效果不是自己想象中的樣子？

例如：我想做一個三欄佈局的頁面，理想效果如下圖：

編寫程式碼如下：

滿心歡喜的刷出來的效果卻是這個樣子的：

這到底是為什麼捏？？？

在Chrome瀏覽器中按F12看看吧

明白了，解釋為：當寫了div1左浮動後，div1是脫離文字流的，那麼在寫div2時，因沒設定浮動，那麼div2就老老實實按照文字流的安排霸佔第一行，當安排div3的放置時，div3設定了右浮動，而現在已經有div2霸佔了第一行，div3只好從第二行放，且右浮動，就出現了上圖的效果了，如果div2足夠寬的話，左部分還會被浮動的div1給覆蓋掉，

如圖：

好吧，這個效果我接受了，可是我怎麼才可以實現我的三欄佈局的效果呢，咦？我的小夥伴好像有實現的，我看看去，啊！！怎麼跟我的程式碼沒啥區別，這是腫麼回事？

小夥伴的程式碼貼出來如下：

F12檢視效果如下：

看來看去，唯一的區別就是這裡了，她把div2根div3寫的順序顛倒了一下。

那麼問題來了，為什麼顛倒一下兩個div的順序，就出來的想要的效果了呢。

分析一下：div1設定了左浮動，不佔用文字流的空間。div3設定右浮動，不佔用文字流的空間。div2沒有設定浮動，因為已經佈置了div1和div3，目前div2是第一個佔用文字流空間的，所以div2又可以霸佔第一行了，常理，假如div2足夠寬的話，左部分還是會被浮動的div1給覆蓋掉，右部分也會被div3給覆蓋掉。

這麼分析對比，是不是就很好理解float屬性了。