想要製作全部靠右且不併排的區塊，只要加上float屬性之後再做一些調整就可以了


在製作區塊排版的時候，如果希望所有區塊都靠左且不併排的話，那就只要不在區塊上加float屬性就可以了

先附上這個練習會用到的原始碼
html部份：

<div id="outside">
  <div id="box1"> id "box1" 的內容放在這裡</div>
  <div id="box2"> id "box2" 的內容放在這裡</div>
  <div id="box3"> id "box3" 的內容放在這裡</div>
</div>

css部份：

#outside {
	background-color: #FF0;
	margin: 10px;
	padding: 10px;
	width: 500px;
	overflow: auto;
}
#box1 {
	height: 50px;
	width: 100px;
	background-color: #6C0;
	margin: 5px 0px;
}
#box2 {
	height: 50px;
	width: 200px;
	background-color: #6C6;
	margin: 5px 0px;
}
#box3 {
	height: 50px;
	width: 150px;
	background-color: #6CC;
	margin: 5px 0px;
}

因為網頁的預設物件原點就是左上角，所以在沒有任何設定之下，區塊預設就會靠左對齊，相對如果希望區塊可以靠右對齊的話，就需要加上靠右的css屬性float: right;了，就如上一個單元介紹的，加上了float: right;屬性之後，物件會由右至左的併排，既然這樣的話，那如何達到這個單元所要介紹的效果呢？
其實也是在之前同一個單元一起介紹的”clear:both; 清除浮動”的屬性，應用在這一次的範例的話，就只要在每個區塊上除了float: right;再加上clear:both; 就可以達成了

附上完成的css

#outside {
	background-color: #FF0;
	margin: 10px;
	padding: 10px;
	width: 500px;
	overflow: auto;
}
#box1 {
	height: 50px;
	width: 100px;
	background-color: #6C0;
	float: right;
	clear: both;
	margin: 5px 0px;
}
#box2 {
	height: 50px;
	width: 200px;
	background-color: #6C6;
	float: right;
	clear: both;
	margin: 5px 0px;
}
#box3 {
	height: 50px;
	width: 150px;
	background-color: #6CC;
	float: right;
	clear: both;
	margin: 5px 0px;
}