課程關鍵詞：清除浮動Clear

還記得第二課我們做的例子的效果麼？最後效果是，紅色方塊和藍色方塊都處於一行，我們使用“Float:left”，打擊了塊狀元素的“霸道”即塊狀元素不允許其他元素和它處於同一行。我們將紅色方塊的CSS程式碼中加入了“Float:left;”後，紅色方塊終於允許藍色方塊和它處於同一行。如圖：

我們換一種方法表達上面的意思，因為紅色方塊的“左側浮動”，才導致藍色方塊上移至紅色方塊的尾後；

在上個例子中，為了達到瀏覽器相容性，我們分別在紅色藍色方塊CSS程式碼中分別加了“Float:left;”，這樣IE和FF中顯示效果一樣，如果此時我們還想放一個寬度400畫素，高度100的綠色方塊，並讓其處於第二行，效果如下圖：

可是這時候不管怎麼放，在IE中的效果始終是

導致綠色拍到藍色的後面這種情況就是因為藍色方塊CSS程式碼中含有"Float:left;"，但是為了瀏覽器相容性，又不能去掉(什麼？這句話看不明白，只能說明第二節課你沒有好好學，好好品味！)，怎麼辦？
好辦~！只要在CSS程式碼中加入下面這段程式碼：

引用:

.clear{clear:both;}

並在HTML程式碼中加入下面程式碼：

引用:

<div class="clear"></div>

上面這句話究竟加在那個位置呢，要加在藍色方塊和綠色方塊中間，然後看看效果是不是我們想要的了~^_^

引用:

<div id="redBlock">部落格的左側</div>
<div id="blueBlock">部落格的右側</div>
<div class="clear"></div>
<div id="greenBlock">部落格的版權資訊</div>

目的就是為了清除藍色方塊的浮動對下面綠色方塊的影響！