明輝手游網(wǎng)中心：是一個免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

div浮動層與默認(rèn)的div層有什么關(guān)系

發(fā)表時間：2023-12-25 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]說到浮動首先我們要清楚一個概念，我們?yōu)槭裁丛O(shè)置浮動樣式？因為想讓DIV對象盒子實現(xiàn)靠左或靠右布局。這樣我們的網(wǎng)頁就可以做的更美觀，交互性更強(qiáng)，那么浮動的DIV和默認(rèn)的DIV之間有什么不同呢？我們一起來看一下div浮動層與div層有何不同css中有什么關(guān)系首先DIV浮動層與DIV層都是指DIV布局，...
說到浮動首先我們要清楚一個概念，我們?yōu)槭裁丛O(shè)置浮動樣式？因為想讓DIV對象盒子實現(xiàn)靠左或靠右布局。這樣我們的網(wǎng)頁就可以做的更美觀，交互性更強(qiáng)，那么浮動的DIV和默認(rèn)的DIV之間有什么不同呢？我們一起來看一下

div浮動層與div層有何不同css中有什么關(guān)系

首先DIV浮動層與DIV層都是指DIV布局，一般使用CSS樣式表加DIV標(biāo)簽組合進(jìn)行布局網(wǎng)頁。

div層一般包括div浮動層，div浮動層說明div被加入css浮動樣式所以被稱為div浮動層，而沒有加入float浮動樣式不具有浮動效果，所以如果沒有被加浮動樣式div不被稱為浮動層。當(dāng)然span、h1、ul、li等標(biāo)簽也是層，只不過span、h1、ul、li等標(biāo)簽沒有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"沒有設(shè)置浮動，“.div-a”設(shè)置靠左浮動（float:left）,“.div-b”設(shè)置靠右浮動（float:right）。

層與浮動層總結(jié)

在以上實例中“.div”對象是普通層，而默認(rèn)是不具有浮動效果的層，因為網(wǎng)頁內(nèi)容是居左的所以看到此層居左，實際是沒有浮動樣式的一個DIV盒子層。而對象內(nèi)子級“.div-a”和“.div-b”是設(shè)置float浮動所以變成了浮動層，從上可以看出他倆在“.div”盒子內(nèi)一個靠左浮動一個靠右浮動。普通層與浮動層區(qū)別就是在于是否被設(shè)置了css float浮動樣式。

關(guān)于浮動的不同已經(jīng)給大家介紹的很清楚了，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

html的span標(biāo)簽怎么使用

html的<textarea>怎么使用

html的滾動條樣式設(shè)置

以上就是div浮動層與默認(rèn)的div層有什么關(guān)系的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。