div浮動層與預設的div層有什麼關係
- php中世界最好的语言原創
- 2017-11-22 17:45:542116瀏覽
說到浮動首先我們要清楚一個概念，我們為什麼要設定浮動樣式？因為想讓DIV物件盒子實現靠左或靠右佈局。這樣我們的網頁就可以做的更美觀，互動性更強，那麼浮動的DIV和預設的DIV之間有什麼不同呢？我們一起來看看
div浮動層與div層有何不同css中有什麼關係
#首先DIV浮動層與DIV層都是指DIV佈局，一般使用CSS樣式表加DIV標籤組合進行版面網頁。
div層一般包含div浮動層，div浮動層說明div被加入css浮動樣式所以被稱為div浮動層，而沒有加入float浮動樣式不具有浮動效果，所以如果沒有被加浮動樣式div不被稱為浮動層。當然span、h1、ul、li等標籤也是層，只不過span、h1、ul、li等標籤沒有div使用頻率高，所以一般就將div作為象徵性稱呼。
接下來告訴大家甚麼是一般層，什麼是浮動層？為什麼要使用div css浮動層。
完整DIV+CSS實例HTML程式碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>div层与浮动层</title>
<style>
.div{ width:400px; height:100px}
.div-a{ float:left; border:1px solid #F00; width:100px; height:80px}
.div-b{ float:right; border:1px solid #00F; width:100px; height:80px}
</style>
</head>
<body>
<div class="div">
<div class="div-a"></div>
<div class="div-b"></div>
</div>
</body>
</html>物件".div"沒有設定浮動，「.div-a」設定靠左浮動（float:left）,「.div- b」設定靠右浮動（float:right）。
層與浮動層總結
在上述實例中「.div」物件是普通層，而預設是不具有浮動效果的層，因為網頁內容是居左的所以看到此層居左，實際上是沒有浮動樣式的一個DIV盒子層。而物件內子級「.div-a」和「.div-b」是設定float浮動所以變成了浮動層，從上可以看出他倆在「.div」盒子內一個靠左浮動一個靠右浮動。普通層與浮動層區別就是在於是否被設定了css float浮動樣式。
關於浮動的差異已經給大家介紹的很清楚了，更多精彩請關注php中文網其它相關文章！
相關讀取：
html的4750256ae76b6b9d804861d8f69e79d3怎麼使用
以上是div浮動層與預設的div層有什麼關係的詳細內容。更多資訊請關注PHP中文網其他相關文章！