CSS實例教程:清除浮動Clear

2024-07-11 09:03:12

字體：大中小

來源：轉載

供稿：網友

武林網(m.survivalescaperooms.com)文章簡介：課程關鍵詞：清除浮動Clear.

課程關鍵詞：清除浮動Clear

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

CSS實例教程:清除浮動Clear

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

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

CSS實例教程:清除浮動Clear

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

CSS實例教程:清除浮動Clear

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

.clear{clear:both;}

并在HTML代碼中加入下面代碼：

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

<div id="redBlock">博客的左側</div>
<div id="blueBlock">博客的右側</div>
<div class="clear"></div>
<div id="greenBlock">博客的版權信息</div>

目的就是為了清除藍色方塊的浮動對下面綠色方塊的影響！是影響喲~是清除影響，而不是清楚藍色方塊的浮動，或者說清除藍色方塊的浮動對下面區域塊產生的作用！（仔細品品我說的這句話！）
如果還是不明白，你就在紅色方塊和藍色方塊中間加上“<div class="clear"></div>”，看看效果變成什么樣子，然后再品品我剛才說的話！

這節課就到這里，下節課我們做一個導航條，很實用的喲！一定要把前三節吃透，不然第四節會跟不上理解不透！

上一篇：CSS網頁制作教程:制作網頁導航條

下一篇：CSS實例教程:定位(position)布局頁面