1. 頁面布局方式

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

1.1 文檔流

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

1.2 浮動層

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

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

1.3 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的圖層在上面。
塊級元素(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遺留下來的空間。