<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #red{ width: 200px; height: 200px; background: red; float:left; } #blue{ width: 200px; height: 200px; background: blue; float:left; } #green{ width: 200px; height: 200px; background: green; float:left; clear:left; } #grey{ width: 200px; height: 200px; background: grey; float:left; } </style> </head> <body> <div id="red"></div> <div id="blue"></div> <div id="green"></div> <div id="grey"></div> </body> </html>
上面就是完整的代碼。那說下怎么實現的。
首先有幾點需要明確：
1.沒有float屬性的div不管它是多么小還是多么寬它都是獨自占用一個行。
2.float:left是什么意思？怎么理解，我是這么理解的，只要一個div加了float:left屬性之后它就變得不再是一個獨占一行的元素了。我們可以把瀏覽器的div分為兩層，這就和兩個平行的平面一樣，所有沒有float的屬性的div都是下面那個平面的，並且因為它們各自獨占一行所以它們相互緊靠着，當最上面的一個div變成float之后下面的div就要擠上來。而有float屬性的div都是上面那個平面的，有了float屬性的div由於不再獨占一行了，所以同一行可以存在多個div，這些個div都在上面那個平面。
3.clear:left，如果某個div加上了這么個屬性，意思就是說我這個div上面不允許有float:left屬性的div。
了解了上面那幾點之后再說下田字格布局的思路。
你最開始寫的代碼肯定是這樣的：
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #red{ width: 200px; height: 200px; background: red; } #blue{ width: 200px; height: 200px; background: blue; } #green{ width: 200px; height: 200px; background: green; } #grey{ width: 200px; height: 200px; background: grey; } </style> </head> <body> <div id="red"></div> <div id="blue"></div> <div id="green"></div> <div id="grey"></div> </body> </html>
效果是這樣的：
思考為什么四個方塊是由上到下排列的，而不是藍色在紅色的右邊，綠色在藍色的右邊，灰色在綠色的右邊，上面說過了，因為它們是沒有float屬性的div，要獨占一行。
接下來想讓藍色的快在紅色的右邊，那么需要給紅色加上float:left屬性，藍色的塊也加上float:left屬性，代碼是這樣的：
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #red{ width: 200px; height: 200px; background: red; float:left; } #blue{ width: 200px; height: 200px; background: blue; float:left; } #green{ width: 200px; height: 200px; background: green; } #grey{ width: 200px; height: 200px; background: grey; } </style> </head> <body> <div id="red"></div> <div id="blue"></div> <div id="green"></div> <div id="grey"></div> </body> </html>
效果如下圖所示：
你可能會問為什么藍色的塊在紅色的塊的右邊？因為紅色的塊有float：left屬性，它飄到了上個平面，而且不再獨占一行元素，而藍色的塊也有float：left屬性，所以紅色的塊和藍色的塊都跑到了上面那個平面而且靠在了一起。你可能會問那綠色的那個塊哪里去了呢?
因為紅色的塊和藍色的塊都跑到了上面那個平面去了，那么原來在下面那個平面的綠塊就會頂到顯示器的上邊緣，而上面的平面會把下面的平面給蓋住，所以綠色的塊在紅色塊的下面。
那怎么讓綠色的塊不被覆蓋掉呢？ 這時候clear:left的作用就體現出來了，我們給綠色的塊加一個clear:left屬性，代碼是這樣的：
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #red{ width: 200px; height: 200px; background: red; float:left; } #blue{ width: 200px; height: 200px; background: blue; float:left; } #green{ width: 200px; height: 200px; background: green; clear:left; } #grey{ width: 200px; height: 200px; background: grey; } </style> </head> <body> <div id="red"></div> <div id="blue"></div> <div id="green"></div> <div id="grey"></div> </body> </html>
效果是這樣的：
為什么綠色的塊加了clear：left不是跑到藍色塊的右邊呢？因為綠色塊目前是一個沒有float：left屬性的塊，它會獨占一個元素，而如果放到了藍色塊的右邊，顯然於“我的上面不允許有float：left屬性的塊”相矛盾，別忘了，沒有float：left屬性的塊不管它有幾個像素，它都獨占一個行。
那怎么讓灰色的塊跑到綠色塊的右邊呢？很簡單，只要把綠色的塊再加上float:left屬性，同時灰色塊也加上float：left屬性即可，最后代碼就是最開始的那個代碼。效果如下：
