溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下css3中浮動(dòng)是不是占有位置的，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
css3中浮動(dòng)是占有位置。float浮動(dòng)的元素可以脫離標(biāo)準(zhǔn)文檔流，擺脫塊級元素和行內(nèi)元素的限制，但是沒有脫離文本流，因此仍然會占據(jù)位置，其他的文本內(nèi)容會按照順序繼續(xù)排列。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
元素浮動(dòng)的特性：
1、浮動(dòng)的元素脫離了標(biāo)準(zhǔn)文檔流，擺脫塊級元素和行內(nèi)元素的限制
2、浮動(dòng)的元素存在相互貼靠的效果，當(dāng)寬度不夠的時(shí)候，會出現(xiàn)自動(dòng)換行
3、浮動(dòng)的元素雖然脫離了標(biāo)準(zhǔn)文檔流，但是沒有脫離文本流，出現(xiàn)被字包圍的效果
float浮動(dòng)跟position:absolute一樣擁有脫離文檔流的功能，但是float雖然脫離了文檔流但是仍然會占據(jù)位置，其他的文本內(nèi)容會按照順序繼續(xù)排列——如果你對所有的元素都設(shè)置了浮動(dòng)，你會看到這幾個(gè)p并不會重疊，而是會順序排列?？梢詤⒖荚O(shè)置display:none,跟visible:hidden的效果。
其他盒子看不見被float的元素，但是其他盒子里的文本看得見
float浮動(dòng)：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮動(dòng)float和absolute區(qū)別</title>
<style>
.box{
width: 500px;
height: 300px;
border: 1px solid black;
margin: 0 auto;
position: relative;
}
.first {
width: 150px;
height: 100px;
/*float: left;*/
display: inline-block;
background: pink;
border: 10px solid red; /*增加了邊框*/
}
.second {
width: 100px;
height: 100px;
background: blue;
display: inline-block;
float: left; /*只設(shè)置一個(gè)浮動(dòng)*/
}
.third{
width: 50px;
height: 100px;
/*float: left;*/
display: inline-block;
background: green;
}
</style>
</head>
<body>
<div>
<div>123</div>
<div>456</div>
<div>789</div>
</div>
</body>
</html>將第27行設(shè)置改成position:absolute;如下圖
將第27行設(shè)置改成position:absolute;加上left:0；如下圖
例子3.脫離文檔流對比
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮動(dòng)float和absolute區(qū)別</title>
<style>
.box{
width: 500px;
height: 300px;
border: 1px solid black;
margin: 0 auto;
position: relative;
}
.first {
width: 150px;
height: 100px;
/*float: left;*/
display: inline-block;
background: pink;
border: 10px solid red; /*增加了邊框*/
}
.second {
width: 100px;
height: 100px;
background: blue;
display: inline-block;
position: absolute;
left:0;
opacity: 0.8
/*float: left;*/
}
.third{
width: 50px;
height: 110px;
float: left;
display: inline-block;
background: green;
/*position: absolute;*/
}
</style>
</head>
<body>
<div>
<div>123</div>
<div>456</div>
<div>789</div>
</div>
</body>
</html>
absolute是脫離文檔流優(yōu)先級更高
浮動(dòng)解析
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{width:500px;height:500px;border: 5px solid green;}
.first {
width: 200px;
height: 200px;
border: 3px solid red;
float:left; /*左浮動(dòng)*/
}
.second {
width: 150px;
height: 100px;
border: 3px solid blue;
}
.third{
width: 110px;
height: 100px;
border: 3px solid grey;
float:left; /*左浮動(dòng)*/
}
</style>
</head>
<body>
<div>
<div>123</div>
<div>456</div>
<div>789</div>
</div>
<div>我是文字</div>
</body>效果圖：
圖中
第一個(gè)元素紅色邊框——左浮動(dòng)
第二個(gè)元素藍(lán)色邊框
第三個(gè)元素灰色邊框——左浮動(dòng)
注：浮動(dòng)的意思就是脫離文檔流，什么是浮動(dòng)脫離文檔流呢？顧名思義，浮動(dòng)就是相當(dāng)于把元素漂浮在沒有設(shè)置浮動(dòng)元素的上方（就好比如沒浮動(dòng)的代表大地，浮動(dòng)則相當(dāng)于白云一樣漂浮在天空，而自己則是在比白云更高的高度俯瞰大地，你俯視哦那塊地被白云遮住了，你只能看到白云卻看不到大地，這就是浮動(dòng)），從圖中就可以看出藍(lán)色邊框被紅色邊框覆蓋掉，怪異的是沒浮動(dòng)的文字內(nèi)容跑到了浮動(dòng)之外，通過這些你大概也清楚了吧，float跟absolute都是脫離文檔流的區(qū)別。
看到這里你可能會疑惑為什么第三個(gè)元素灰色邊框會在紅框中間而不是上方呢？
答：第二個(gè)元素沒有設(shè)置浮動(dòng)，第三元素浮動(dòng)是按第二個(gè)浮動(dòng)的順序和位置去浮動(dòng)的，第三個(gè)元素只有當(dāng)?shù)谒膫€(gè)元素（未設(shè)置浮動(dòng)的情況下）出現(xiàn)才能看出浮動(dòng)在上方效果
浮動(dòng)和定位的區(qū)別：
浮動(dòng)還會占據(jù)原來的位置
定位會脫離文檔流，不占據(jù)原來的位置
如果三個(gè)元素均設(shè)置了浮動(dòng)，則按順序位置并排在一排，產(chǎn)生的問題是會使父元素（沒設(shè)置寬高情況下）高度坍塌從而使邊框合并，解決的方法就是清除浮動(dòng)。
若第二個(gè)元素設(shè)置了寬高，則第三個(gè)元素浮動(dòng)會漂浮在寬高之外。
浮動(dòng)float的原本作用是為了實(shí)現(xiàn)文字環(huán)繞效果
以上是“css3中浮動(dòng)是不是占有位置的”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼