DIV+CSS基礎教程:清除浮動

來源:互聯網
上載者:User

課程關鍵詞:清除浮動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>

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

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

作者:kwoojan   出自:CSS學習論壇

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.