<html><head><style type="text/css"> body{margin:0;padding:0;} #a{width:500px;height:500px;border:solid;}.div{width:100px;height:100px;border:soild;margin:5px;background:green;float:left;} #b{width:100px;height:100px;border:soild;background:green;float:left;margin:5px;} </style> <head><body><div id="a"><div id="b"></div><div class="div"></div><div class="div"></div><div class="div"></div><div class="div"></div></div></body></html>
這個顯示Firefox和ie6一樣的
當第一個浮動div高度比其他浮動div高時，會怎樣？
<html><head><style type="text/css"> body{margin:0;padding:0;} #a{width:500px;height:500px;border:solid;}.div{width:100px;height:100px;border:soild;margin:5px;background:green;float:left;} #b{width:100px;height:110px;border:soild;background:green;float:left;margin:5px;} </style> <head><body><div id="a"><div id="b"></div><div class="div"></div><div class="div"></div><div class="div"></div><div class="div"></div></div></body></html>
你會發現最後一個卡在那裡了，它不會硬擠過去的，硬擠就撞車了是吧，div還是要有點禮貌的，但是它也不會自動調整top邊距到左邊，因為它還沒那麼智能，需要手動調整，自動能跑的話那碉堡了是吧。。
下面在看個例子
<html><head><style type="text/css"> body{margin:0;padding:0;} #a{width:500px;height:500px;border:solid;} #b{width:130px;height:350px;border:soild;background:green;float:left;margin:5px;} #c{width:350px;height:350px;border:soild;background:green;float:left;margin:5px;} </style> <head><body><div id="a"><div id="b"></div><div id="c"></div></div></body></html>
這是一般網頁的架構，頭部就沒弄了，這裡是中部，左邊是列表，右邊顯示內容
現在弄尾部
我要弄這個效果
代碼如下
<html><head><style type="text/css"> body{margin:0;padding:0;} #a{width:500px;height:500px;border:solid;} #b{width:130px;height:350px;border:soild;background:green;float:left;margin:5px;} #c{width:350px;height:350px;border:soild;background:green;float:left;margin:5px;} #d{width:490px;height:100px;border:soild;background:red;float:left;margin:5px;} </style> <head><body><div id="a"><div id="b"></div><div id="c"></div><div id="d"></div></div></body></html>
但是很多人會忘了在底層加float:left;
就是這樣
#d{width:490px;height:100px;border:soild;background:red;margin:5px;}
結果會發生這樣
還記得之前說的話，地上div不會知道天上div的存在，所以也就不知道浮動div已經佔據了地區
除了讓底層也加上float:left;
還有一個方法，就是clear
clear是清除浮動的意思，開始讓我很不理解，估計也讓大多數人不理解
這裡的清除不是把浮動div刪除，也不會讓它改變位置
應該這樣理解
給一個普通div加上clear，等於是給他安裝了一個能看到空中的眼睛，地上div就可以看到空中div的情況，從而知道空中div佔用了哪些地區，從而避免去佔用空中div的地區
clear有left right，both ，none屬性，預設就是none，等於沒設定
left是可以看到地上div自身左上空的情況，right就是右上空
both就是兩邊，一般用both
<html><head><style type="text/css"> body{margin:0;padding:0;} #a{width:500px;height:500px;border:solid;} #b{width:130px;height:350px;border:soild;background:green;float:left;margin:5px;} #c{width:350px;height:350px;border:soild;background:green;float:left;margin:5px;} #d{width:490px;height:100px;border:soild;background:red;margin:5px;clear:both;} </style> <head><body><div id="a"><div id="b"></div><div id="c"></div><div id="d"></div></div></body></html>
以上就是div+css網頁布局設計新開端（8）的內容，更多相關內容請關注topic.alibabacloud.com（www.php.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
