下面用個(gè)圣杯布局的例子說(shuō)明一下，理解了這個(gè)之后其他布局更加簡(jiǎn)單：
left，寬度固定,高度可固定也可由內(nèi)容撐開
right，寬度固定，高度可固定也可由內(nèi)容撐開
center，可以自適應(yīng)瀏覽器寬度，高度可固定也可由內(nèi)容撐開。
HTML & CSS：
原理非常簡(jiǎn)單，左右側(cè)邊欄定寬并浮動(dòng)，中部?jī)?nèi)容區(qū)放最后不浮動(dòng)、默認(rèn)width：auto并設(shè)置相應(yīng)外邊距，讓左右側(cè)邊欄浮動(dòng)到上面。注意：子元素設(shè)置為浮動(dòng)之后，父對(duì)象的高度就坍塌了，需要設(shè)置父對(duì)象后的元素清除浮動(dòng)，這樣父對(duì)象的高度才能被浮動(dòng)子元素?fù)纹饋?lái)了。
當(dāng)然，我們也要問(wèn)一下，為啥父對(duì)象高度會(huì)坍塌呢？上面也說(shuō)過(guò)了，浮動(dòng)元素已經(jīng)脫離了普通流，父對(duì)象所在的普通流比喻成地表，那浮動(dòng)元素就已經(jīng)上天了。但是父對(duì)象還在地表啊，從外太空看浮動(dòng)元素在父對(duì)象里面，但是其實(shí)并不在，又怎么能撐開父對(duì)象呢？寬度如果我們不設(shè)置的話，其實(shí)也是為0的，因?yàn)楦笇?duì)象里面空空如也，所以寬高為0。
要撐開的辦法就兩個(gè)，1是讓父對(duì)象也上天（。。。你咋不上天呢），2是把浮動(dòng)元素的邊框邊界拉下來(lái)。
父對(duì)象也上天（即浮動(dòng)）的話，那就不能實(shí)現(xiàn)寬度自適應(yīng)了。因?yàn)閒loat元素的width：auto是包裹內(nèi)容的，參考前面說(shuō)的！