你可以創(chuàng)建很多網(wǎng)格來(lái)鋪滿瀏覽器。在過(guò)去很長(zhǎng)的一段時(shí)間內(nèi)使用 float 是一種選擇，但是使用 inline-block 會(huì)更簡(jiǎn)單。讓我們看下使用這兩種方法的例子：
困難的方式（使用浮動(dòng)）
.box { float: left; width: 200px; height: 100px; margin: 1em; } .after-box { clear: left; } 我在浮動(dòng)！
我在浮動(dòng)！
我在浮動(dòng)！
我在浮動(dòng)！
我在浮動(dòng)！
我在浮動(dòng)！
我在浮動(dòng)！
我在浮動(dòng)！
我在浮動(dòng)！
我在浮動(dòng)！
我在浮動(dòng)！
我在使用 clear，所以我不會(huì)浮動(dòng)到上面那堆盒子的旁邊。
容易的方式（使用 inline-block）
你可以用 display 屬性的值 inline-block 來(lái)實(shí)現(xiàn)相同效果。
.box2 { display: inline-block; width: 200px; height: 100px; margin: 1em; } 我是一個(gè)行內(nèi)塊！
我是一個(gè)行內(nèi)塊！
我是一個(gè)行內(nèi)塊！
我是一個(gè)行內(nèi)塊！
我是一個(gè)行內(nèi)塊！
我是一個(gè)行內(nèi)塊！
我是一個(gè)行內(nèi)塊！
我是一個(gè)行內(nèi)塊！
我是一個(gè)行內(nèi)塊！
我是一個(gè)行內(nèi)塊！
我是一個(gè)行內(nèi)塊！
這次我可沒(méi)有用 clear 。太棒了！
你得做些額外工作來(lái)讓IE6和IE7支持 inline-block 。有些時(shí)候人們談到 inline-block 會(huì)觸發(fā)叫做 hasLayout 的東西，你只需要知道那是用來(lái)支持舊瀏覽器的。
