網頁上免不了要用到的區塊併排，常用的方式有float和inline-block這種方式，這一篇介紹float的設定方法和相關應用。


下面是要製作併排時基本會用到的html和css，可以複製以下的語法來練習
html部份：

<div id="outside">
  <div class="box"> class "box" 的內容放在這裡1</div>
  <div class="box"> class "box" 的內容放在這裡2</div>
  <div class="box"> class "box" 的內容放在這裡3</div>
  <div class="box"> class "box" 的內容放在這裡4</div>
  <div class="box"> class "box" 的內容放在這裡5</div>
  <div class="box"> class "box" 的內容放在這裡6</div>
  <div class="box"> class "box" 的內容放在這裡7</div>
  <div class="box"> class "box" 的內容放在這裡8</div>
  <div id="bottom"> id "bottom" 的內容放在這裡</div>
</div>

css部份：

#outside {
	background-color: #FF0;
	width: 580px;
	margin: 5px;
	padding: 10px;
}
.box {
	margin: 5px;
	float: left;
	height: 70px;
	width: 70px;
	background-color: #F90;
	padding: 10px;
	border: 5px solid #900;
}

要重覆出現並且併排的.box物件上套用float:left則物件會由左至右排列，反之套用float:right則物件會由右至左排列。
當外框物件有設定”寬width”時，.box物件會依外框寬度自動換行。

背景色延伸

如上圖所呈現的，內容物件套用float屬性之後背景色不會跟著內容的長度而延伸，如果希望背景可以延伸的話，在外框再加入overflow:auto的屬性就可以

#outside {
	background-color: #FF0;
	width: 580px;
	overflow: auto;
	margin: 5px;
	padding: 10px;
}

底部區塊不併排

當我們在.box物件的最後加入一個#bottom物件，這個最底下的物件會因為上面.box物件的float屬性而被壓在後面。

#bottom {
	background-color: #6CF;
	height: 50px;
}

如果希望這個#bottom物件可以跟外框一樣寬，不併排的話，需要在#bottom上套用”clear:both; 清除浮動”的屬性。
※如果連結float屬性區塊的最後，有一個帶有clear:both;屬性的區塊的話，那外框就不用再加overflow:auto了。

#bottom {
	background-color: #6CF;
	height: 50px;
	clear: both;
}

用圖片說明的話大概是下面這樣：

最後附上完整的css

#outside {
	background-color: #FF0;
	width: 580px;
	margin: 5px;
	padding: 10px;
}
.box {
	margin: 5px;
	float: left;
	height: 70px;
	width: 70px;
	background-color: #F90;
	padding: 10px;
	border: 5px solid #900;
}
#bottom {
	background-color: #6CF;
	height: 50px;
	clear: both;
}