css float屬性_動力節點Java學院整理

2024-07-11 08:41:51

字體：大中小

來源：轉載

供稿：網友

頁面布局方式

頁面布局方式，主要包含：文檔流、浮動層、float屬性。

文檔流

HTML頁面的標準文檔流(默認布局)是：從上到下，從左到右，遇塊(塊級元素)換行。

浮動層

浮動層：給元素的float屬性賦值后，就是脫離文檔流，進行左右浮動，緊貼著父元素(默認為body文本區域)的左右邊框。而此浮動元素在文檔流空出的位置，由后續的(非浮動)元素填充上去：塊級元素直接填充上去，若跟浮動元素的范圍發生重疊，浮動元素覆蓋塊級元素。內聯元素：有空隙就插入。

float 屬性介紹

　　① left ：元素向左浮動。

　　② right ：元素向右浮動。

　　③ none ：默認值。

　　④ inherit ：從父元素繼承float屬性。

示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"><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

說明：元素向左浮動。

代碼變更

input2 添加：float:left
div-b 添加：float:left
div-d 添加：float:left

變更后視圖

① 瀏覽器的寬度“不夠長”時

② 瀏覽器的寬度"夠長"時

結論

當前元素分類(float:left)	下一個緊鄰元素分類(不含float)	結論
塊級元素(a)	塊級元素(b)	b會填充a遺留下來的空間，a會和b發生重疊，a的圖層在上面。
	內聯元素(b)	b會緊跟在a的后面。并根據自身內聯元素的特點，是否換行。
內聯元素(a)	塊級元素(b)	b不會跟隨a的移動。
	內聯元素(b)	b會緊跟在a的后面。并根據自身內聯元素的特點，是否換行。

3. float:right

說明：元素向右浮動。

代碼變更

input2元素：添加 float:right
div-b 添加：float:right
div-d 添加：float:right

變更后視圖

① 瀏覽器的寬度“不夠長”時

② 瀏覽器的寬度"夠長"時

結論

當前元素分類(float:right)	下一個緊鄰元素分類(不包含float)	結論
塊級元素(a)	塊級元素(b)	b會填充a遺留下來的空間，若a會和b發生重疊(父容器寬度減少)，a的圖層在上面。
	內聯元素(b)	b會填充a遺留下來的空間。
內聯元素(a)	塊級元素(b)	b不會跟隨a的移動。
	內聯元素(b)	b會填充a遺留下來的空間。