div+css網頁佈局設計新開端（8）-css教學-PHP中文網

首頁

web前端

css教學

div+css網頁佈局設計新開端（8）

黄舟

Dec 29, 2016 pm 02:42 PM

繼續，當一組浮動元素碰到右邊空間不夠了，它會自動往下走，不會脫離最外層，也就是說它雖然不會遵循地上的流模式，還是會遵循空中的流模式的，ps：它們都漂浮的同一高度哦。。

<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>

登入後複製

div+css網頁佈局設計新開端（8）

這個顯示火狐和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+css網頁佈局設計新開端（8）

你會發現最後一張卡在那裡了，它不會硬擠過去的，硬擠就撞車了是吧，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>

登入後複製

div+css網頁佈局設計新開端（8）

這是一般網頁的架構，頭部就沒弄了，這裡是中部，左邊是列表，右邊顯示內容
現在弄尾部
我要弄這個效果

div+css網頁佈局設計新開端（8）

程式碼如下

<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+css網頁佈局設計新開端（8）

之前不會說的話，divdiv存在，所以也就不知道浮動div已經佔據了區域

除了讓底層也加上float:left;

還有一個方法，就是clear

clear是清除浮動的意思，開始讓我很不理解，估計也讓大多數人不理解
這裡的清除不是把浮動div刪除，也不會讓它改變位置
應該這樣理解
給一個普通div加上clear，等於是給他安裝了一個能看到空中的眼睛，地上div就可以看到空中div的情況，從而知道空中div佔用了哪些區域，從而避免去佔用空中div的區域

clear有left right，both ，none屬性，預設就是none，等於沒設定
left是可以看到地上div自身左上空的情況，right就是右上空

both就是兩邊，一般用both

div+css網頁佈局設計新開端（8）

<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）的內容，更多相關內容請關注PHP中文網（www.php.cn）！

🎜🎜

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn