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