浮動佈局是非常經典常見的頁面佈局方式。

實現方式很簡單，第一步先設定需要浮動起來的元素的寬度width。第二步設定該元素的浮動屬性float

（浮動屬性float可參閱W3C：http://www.w3schools.com/cssref/pr_class_float.asp）

下圖是頁面初始HTML流：

為了將紅框部分浮動起來，需要分兩步，第一步就是設定該元素的寬度width

#floatLayout {
	width: 200px;
}

第二步是設定浮動屬性float，將該元素浮動到頁面右邊

#floatLayout {
	width: 200px;
	float: right;
}
 

浮動元素將浮動到頁面右邊（當然你也可以設定成居左浮動）。

HTML端定義在浮動元素下面的塊元素將無視浮動元素，彷彿HTML流內被浮動起來的元素消失了一樣。但內聯元素（如塊元素內的文字）將像流水一樣圍繞著浮動元素。

另外有個注意點，如果浮動元素過長，可能會影響到本部想被影響的部分（如頁面的footer，footer裡的內聯元素將像流水一樣圍繞著浮動元素）：

你可以設定clear屬性，使元素周圍不能有浮動元素，程式碼和效果圖如下：

#footer {
	clear: right;  //右邊不能有浮動元素
}

總結：

元素被浮動起來後，html端所有定義在該元素下面塊元素將無視浮起來的元素，但內聯元素會

由於html端定義在浮動元素上面的元素不受影響。如果要浮動元素上面某元素也圍繞浮動元素，只能調整html端定義的順序

補充兩個細節：

1.因為塊元素將無視浮起來的元素，所有浮動元素的外邊距不會和正常流中的元素的外邊距發生摺疊

2.

比如html端定義：

<div id=“main”>。。。</div>  //內含頁面主內容

<div id=“float”>。。。</div>  //內含需要浮動起來的內容

要想讓main圍繞著浮動元素，只能在html端調整兩個div的上下順序。（如果你不在意HTML端元素擺放的上下順序的話，這其實也談不上是個缺點）

你可能提出另一個方案，即讓mian浮動起來，這樣html端就不用調整順序了。