辦法2就是在后面的元素里加一個clear語句。說到這個問題就要扯到clear與BFC了，我就不獻(xiàn)丑了。傳送門： clear
這個三列布局還有個雙飛（是雙飛翼！想啥呢）的變種，就是在HTML中center部分也就是內(nèi)容區(qū)提到最前面，也就是內(nèi)容先行渲染。在網(wǎng)絡(luò)不好的時候，左右雙翼能不能出來不要緊，先讓主體內(nèi)容出來！這種想法，明顯的優(yōu)秀工程師思維，但，尼瑪?shù)碾p翼都是廣告啊。廣告不出來，哪能賺錢養(yǎng)你們這群工程師？所以提出雙飛的玉伯才離開了淘寶？？？（純屬意淫，如真屬實，當(dāng)我扯淡，哈哈哈?。?/p>
先上碼：
思路：
1)既然HTML里面要讓center放前面，為了讓left跑到center前面，那center也必須浮動了，否則因為都是塊元素他們會分兩行。
2)浮動之后還要讓center寬度自適應(yīng)，那明顯width只能100%，然后在父元素中設(shè)width:auto，還有兩側(cè)margin，其實也就是父對象寬度自適應(yīng)，center只是繼承content的寬度。
3)對left使用負(fù)的margin讓他們浮動到上方去。
代碼里面我用到了一個calc()，這個CSS3帶來的計算函數(shù)簡直酷斃了！本例里如果不使用calc函數(shù)，那么就需要wrap左邊距為0，left左邊距-100%，然后center多加一層子塊DIV設(shè)置margin-left：100px，可以達(dá)到同樣的效果！calc函數(shù)與百分比配合就足以實現(xiàn)自適應(yīng)的要求！目前所有的自適應(yīng)布局都在利用瀏覽器來為我們計算尺寸，但是有了calc之后我們就可以自己制定規(guī)則！單是想想都高潮了吧？
總結(jié)：使用浮動來進(jìn)行布局，一個比較大的問題是清除浮動。這個可以使用一個after偽類來清除。更大的問題是浮動性像水一樣向上流動，難以把握。在元素較多而且元素高度尺寸不一的情況下，單純使用浮動只能實現(xiàn)上端對齊，這對于適應(yīng)多種設(shè)備的布局就顯得力不從心了。目前的做法是犧牲一部分內(nèi)容，將元素做成等高排列，從美觀上看也當(dāng)然也是極好的，比參差不齊的排列要美觀。