css 浮動

時間 2019-11-21

標籤 css 浮動欄目 CSS 简体版

原文原文鏈接

1. 頁面佈局方式：介紹文檔流、浮動層以及float屬性。css

2. float:left ：介紹float爲 left 時的佈局方式。html

3. float:right ：介紹float爲 right 時的佈局方式。瀏覽器

4. 相鄰元素含有float屬性：介紹相鄰元素含有float屬性時的佈局方式。app

1. 頁面佈局方式

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

1.1 文檔流

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

1.2 浮動層

浮動層：給元素的float屬性賦值後，就是脫離文檔流，進行左右浮動，緊貼着父元素(默認爲body文本區域)的左右邊框。3d

而此浮動元素在文檔流空出的位置，由後續的(非浮動)元素填充上去：塊級元素直接填充上去，若跟浮動元素的範圍發生重疊，浮動元素覆蓋塊級元素。內聯元素：有空隙就插入。code

1.3 float 屬性介紹

　　① left ：元素向左浮動。xml

　　② right ：元素向右浮動。htm

　　③ 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的圖層在上面。
塊級元素(a)	內聯元素(b)	b會緊跟在a的後面。並根據自身內聯元素的特色，是否換行。
內聯元素(a)	塊級元素(b)	b不會跟隨a的移動。
內聯元素(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的圖層在上面。
塊級元素(a)	內聯元素(b)	b會填充a遺留下來的空間。
內聯元素(a)	塊級元素(b)	b不會跟隨a的移動。
內聯元素(a)	內聯元素(b)	b會填充a遺留下來的空間。