小編給大家分享一下css浮動的屬性是指什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
css浮動的屬性是指“float”屬性，用于指定一個盒子（元素）是否應該浮動，定義朝哪個方向浮動。元素使用了float屬性后，可以使該元素脫離標準流本身，浮動在其他元素之上，使其不再占用原本屬于該元素的空間。
1. 頁面布局方式
頁面布局方式，主要包含：文檔流、浮動層、float屬性。
1.1 文檔流
HTML頁面的標準文檔流(默認布局)是：從上到下，從左到右，遇塊(塊級元素)換行。
1.2 浮動層
浮動層：給元素的float屬性賦值后，就是脫離文檔流，進行左右浮動，緊貼著父元素(默認為body文本區域)的左右邊框。
而此浮動元素在文檔流空出的位置，由后續的(非浮動)元素填充上去：塊級元素直接填充上去，若跟浮動元素的范圍發生重疊，浮動元素覆蓋塊級元素。內聯元素：有空隙就插入。
1.3 float 屬性介紹
float屬性：用于指定一個盒子（元素）是否應該浮動，可以定義元素朝哪個方向浮動。
元素使用了float屬性后，可以使該元素脫離標準流本身，浮動在其他元素之上，使其不再占用原本屬于該元素的空間，這樣會導致后面的元素上移并占用原本屬于該元素的空間。
注意： 絕對定位的元素忽略float屬性！
屬性值：
?、?left ：元素向左浮動。
?、?right ：元素向右浮動。
?、?none ：默認值。
?、?inherit ：從父元素繼承float屬性。
1.4 示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>2.3-float屬性</title>
<style type="text/css">
#a
{
background-color:Red;
height:50px;
width:100px;
}
#b
{
background-color:Yellow;
height:50px;
width:200px;
}
#c
{
background-color:Blue;
height:50px;
width:300px;
}
#d
{
background-color:Gray;
height:50px;
width:400px;
}
</style>
</head>
<body>
<div id=a >div-a</div>
<div id=b>div-b</div>
<div id=c>div-c</div>
<input type="text" value="input1" />
<input type="text" value="input2" />
<input type="text" value="input3 " />
<div id=d>div-d</div>
<input type="text" value="input4 " />
</body>
</html>2. float:left
說明：元素向左浮動。
2.1 代碼變更
input2 添加：float:left
div-b 添加：float:left
div-d 添加：float:left
2.2 變更后視圖
?、?瀏覽器的寬度“不夠長”時
?、?瀏覽器的寬度"夠長"時
2.3 結論
當前元素分類(float:left) | 下一個緊鄰元素分類(不含float) | 結論 |
塊級元素(a) | 塊級元素(b) | b會填充a遺留下來的空間，a會和b發生重疊，a的圖層在上面。 |
內聯元素(b) | b會緊跟在a的后面。并根據自身內聯元素的特點，是否換行。 | |
內聯元素(a) | 塊級元素(b) | b不會跟隨a的移動。 |
內聯元素(b) | b會緊跟在a的后面。并根據自身內聯元素的特點，是否換行。 |
3. float:right
說明：元素向右浮動。
3.1 代碼變更
input2元素：添加 float:right
div-b 添加：float:right
div-d 添加：float:right
3.2 變更后視圖
?、?瀏覽器的寬度“不夠長”時
?、?瀏覽器的寬度"夠長"時
3.3 結論
當前元素分類(float:right) | 下一個緊鄰元素分類(不包含float) | 結論 |
塊級元素(a) | 塊級元素(b) | b會填充a遺留下來的空間，若a會和b發生重疊(父容器寬度減少)，a的圖層在上面。 |
內聯元素(b) | b會填充a遺留下來的空間。 | |
內聯元素(a) | 塊級元素(b) | b不會跟隨a的移動。 |
內聯元素(b) | b會填充a遺留下來的空間。 |
4. 相鄰元素含有float屬性
因內聯元素的特性，最好別把內聯元素與塊級元素相鄰使用float屬性。
下面都以塊級元素為例：
默認視圖：
4.1 float:left
給這三個div都添加 float:left
4.1.1 視圖
?、贋g覽器的寬度"足夠長"
?、跒g覽器的寬度"不夠長"
4.1.2 結論
?、?相鄰的浮動元素，left屬性最前面的元素，排在最左面。
?、?成為浮動元素后，在浮動層擁有內聯元素的"特性"，當多個浮動元素1排容不下時，就換行。
4.2 float:right
給這三個div都添加 float:right
4.2.1 視圖
?、贋g覽器的寬度"足夠長"
?、跒g覽器的寬度"不夠長"
4.2.2 結論
?、?相鄰的浮動元素，right屬性最前面的元素，排在最右面。
?、?成為浮動元素后，在浮動層擁有內聯元素的"特性"，當多個浮動元素1排容不下時，就換行。
4.3 height高度不等的塊級元素
把div-a的height值設為大于div-b，三個div都添加 float:left后：
4.3.1 視圖
?、贋g覽器的寬度"足夠長"
?、跒g覽器寬度縮小時
?、蹫g覽器寬度進一步縮小時
4.3.2 結論
?、?height不相等的div浮動元素排序時，照擁有內聯元素的"特性"，當多個浮動元素1排容不下時，就換行。
4.3.3 解決瀏覽器寬度縮小變形
把添加float的屬性的div元素嵌入在一個div中，并給此div添加width和height屬性。瀏覽器寬度縮小時，也不會發生變形。
以上是“css浮動的屬性是指什么”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
