思考為什麼四個方塊是由上到下排列的，而不是藍色在紅色的右邊，綠色在藍色的右邊，灰色在綠色的右邊，上面說過了，因為它們是沒有float屬性的div，要獨佔一行。
接下來想讓藍色的快在紅色的右邊，那麼需要給紅色加上float:left屬性，藍色的塊也加上float:left屬性，**是這樣的：
效果如下圖所示：
你可能會問為什麼藍色的塊在紅色的塊的右邊？因為紅色的塊有float：left屬性，它飄到了上個平面，而且不再獨佔一行元素，而藍色的塊也有float：left屬性，所以紅色的塊和藍色的塊都跑到了上面那個平面而且靠在了一起。你可能會問那綠色的那個塊**去了呢?
因為紅色的塊和藍色的塊都跑到了上面那個平面去了，那麼原來在下面那個平面的綠塊就會頂到顯示器的上邊緣，而上面的平面會把下面的平面給蓋住，所以綠色的塊在紅色塊的下面。
那怎麼讓綠色的塊不被覆蓋掉呢？ 這時候clear:left的作用就體現出來了，我們給綠色的塊加乙個clear:left屬性，**是這樣的：
效果是這樣的：
為什麼綠色的塊加了clear：left不是跑到藍色塊的右邊呢？因為綠色塊目前是乙個沒有float：left屬性的塊，它會獨佔乙個元素，而如果放到了藍色塊的右邊，顯然於「我的上面不允許有float：left屬性的塊」相矛盾，別忘了，沒有float：left屬性的塊不管它有幾個畫素，它都獨佔乙個行。
那怎麼讓灰色的塊跑到綠色塊的右邊呢？很簡單，只要把綠色的塊再加上float:left屬性，同時灰色塊也加上float：left屬性即可，最後**就是最開始的那個**。效果如下：
田字格布局
我是1號 我是2號 我是3號 我是4號 首先有幾點需要明確 1.沒有float屬性的div不管它是多麼小還是多麼寬它都是獨自占用乙個行。2.float left是什麼意思？只要乙個div加了float left屬性之後它就變得不再是乙個獨佔一行的元素了。我們可以把瀏覽器的div分為兩層，這就和兩個平...
更大的田字格python
5.1程式練習題3.5輸出了乙個簡單的田字格，用函式化簡其 輸出如圖5.12所示的更大田字格。a,b,c,d defline m 橫線for i in range m 5 1 print format a if i 5 0else b end print deflittlegezi m 小格仔 不帶...
CSS3田字格列表的樣式編寫
在很多專案中，需要實現分格展示的功能，中間有灰色分割線，兩側沒有。如圖 按照一般的思路，設定好li的寬度，通過nth of type n 的方式給li標籤新增樣式。設定每個li 33.33 的寬度，但當我們新增1px邊框時，最右邊的內容就被擠了下來。這時可以通過給父級 ul 新增 before af...