還記得第二課我們做的例子的效果嗎？最後效果是，紅色方塊和藍色方塊都處於一行，我們使用“Float:left”，打擊了塊狀元素的“霸道”即塊狀元素不允許其他元素和它處於同一行。我們將紅色方塊的CSS代碼中加入了“Float:left;”後，紅色方塊終於允許藍色方塊和它處於同一行。如圖：
我們換一種方法表達上面的意思，因為紅色方塊的“左側浮動”，才導致藍色方塊上移至紅色方塊的尾後；
在上個例子中，為了達到瀏覽器安全色性，我們分別在紅色藍色方塊CSS代碼中分別加了“Float:left;”，這樣IE和FF中顯示效果一樣，如果此時我們還想放一個寬度400像素，高度100的綠色方塊，並讓其處於第二行，效果如下圖：
可是這時候不管怎麼放，在IE中的效果始終是
導致綠色拍到藍色的後面這種情況就是因為藍色方塊CSS代碼中含有"Float:left;"，但是為了瀏覽器安全色性，又不能去掉(什嗎？這句話看不明白，只能說明第二節課你沒有好好學，好好品味！)，怎麼辦？
好辦~！只要在CSS代碼中加入下面這段代碼：
.clear{clear:both;}
並在HTML代碼中加入下面代碼：
<divclass="clear"></div>
上面這句話究竟加在那個位置呢，要加在藍色方塊和綠色方塊中間，然後看看效果是不是我們想要的了~^_^
<div id="redBlock">部落格的左側</div>
<div id="blueBlock">部落格的右側</div>
<div class="clear"></div>
<div id="greenBlock">部落格的著作權資訊</div>
目的就是為了清除藍色方塊的浮動對下面綠色方塊的影響！是影響喲~是清除影響，而不是清楚藍色方塊的浮動，或者說清除藍色方塊的浮動對下面地區塊產生的作用！（仔細品品我說的這句話！）
如果還是不明白，你就在紅色方塊和藍色方塊中間加上“<div class="clear"></div>”，看看效果變成什麼樣子，然後再品品我剛才說的話！
這節課就到這裡，下節課我們做一個導航條，很實用的喲！一定要把前三節吃透，不然第四節會跟不上理解不透！
第三課全代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>右側浮動Float:left-CSS學習互動社區</title>
<style type="text/css">
<!--
#redBlock,#greenBlock,#blueBlock{
width:200px;
height:200px;
color:#FFF;
}
#redBlock{
background:#900;
float:left;
}
#blueBlock{
background:#009;
float:left;
}
#greenBlock{
width:400px;
height:100px;
background:#090;
}
.clear{clear:both;}
-->
</style>
</head>
<body>
<div id="redBlock">部落格的左側</div>
<div id="blueBlock">部落格的右側</div>
<div class="clear"></div>
<div id="greenBlock">部落格的著作權資訊</div>
</body>
</html>
本文來自www.cssxuexi.cn ＊尊重他人勞動成果，轉載請自覺註明出處！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
