2欄式網頁是最常見的排版之一，常用的方式有float和inline-block這種方式，這一篇介紹float的3種不同設定方法。


這個範例分三組來介紹，下面是基本會用到的html和css，可以複製以下的語法來練習。
html部份：

<div class="outside">
  <div id="left1">#left1<br/>
    width:要設定;<br/>
    float:left;<br/>
    margin-right:10px;
  </div>
  <div id="right1"> #right1<br/>
  float:left;
  </div>
</div>
<div class="outside">
  <div id="left2">#left2<br/>
    width:要設定;<br/>
  float:left;
  </div>
  <div id="right2">#right<br/>
    width:要設定;<br/>
  float:right;</div>
</div>
<div class="outside">
  <div id="left3">#ldft3<br/>
    width:要設定;<br/>
  float:left;</div>
  <div id="right3">#right3<br/>
    width:auto;<br/>
    margin-left:(#left3的寬 + margin)
  </div>
</div>

css部份：

.outside {
	background-color: #FF0;
	width: 510px;
	overflow: auto;
	margin: 5px;
	padding: 10px;
}
#left1{
	height: 100px;
	width: 200px;
	background-color: #69F;
	float: left;
	margin-right: 10px;
}
#right1{
	height: 100px;
	width: 300px;
	background-color: #6C6;
	float: left;
}
#left2{
	height: 100px;
	width: 200px;
	background-color: #69F;
	float: left;
}
#right2{
	height: 100px;
	width: 300px;
	background-color: #6C6;
	float: right;
}
#left3{
	height: 100px;
	width: 200px;
	background-color: #69F;
	float: left;
}
#right3{
	height: 100px;
	background-color: #6C6;
	width: auto;
	margin-left: 210px;
}

第1組：左右區塊都設定float:left;

設定了float:left;屬性的區塊會從左至右排列，所以用這樣的方法，所以一定要為每個區塊都設定好所要的寬度(width)，float物件如果沒有設定寬度的話，預設會依照區塊的內容決定寬度，如下圖：

而設定了寬度也要計算一下區塊間距跟區塊與外框的間距，以這一個範例來說：
外框寬度是width: 510px;，而左右區塊的間距10px要再減掉，這樣一來左右區塊可以用的寬度就要限制在500px了，如果設定得數值不剛好的話，就會發生像下圖的情況

另外因為左右兩個區塊都是設定float:left;，所以在左區塊需要再增加margin-right: 10px;的屬性讓兩區塊中間有間距，否則會是相連的區塊

附上完成的CSS

.outside {
	background-color: #FF0;
	width: 510px;
	overflow: auto;
	margin: 20px 0;
	padding: 10px;
}
#left1{
	height: 100px;
	width: 200px;
	background-color: #69F;
	float: left;
	margin-right: 10px;
}
#right1{
	height: 100px;
	width: 300px;
	background-color: #6C6;
	float: left;
}

第2組：左區塊設定float:left;，右區塊設定float:right;

float:left;屬性是由左往右排列，而float:right;是由右往左
所以這樣設定的兩個區塊自然會分散在左右兩邊，所以只要設定好應當的寬度就可以了
而且因為兩個區塊本來就分散在左右，所以就不用特別再設定margin來產生間距了
當然如果寬度設定得不剛好的話，也是會出現像下圖的情況

附上完成的CSS

.outside {
	background-color: #FF0;
	width: 510px;
	overflow: auto;
	margin: 20px 0;
	padding: 10px;
}
#left2{
	height: 100px;
	width: 200px;
	background-color: #69F;
	float: left;
}
#right2{
	height: 100px;
	width: 300px;
	background-color: #6C6;
	float: right;
}

第3組：左區塊設定float:left;，右區塊設定margin-left

這一組的設定方式其實是利用了float浮動在底圖層上的屬性，如果只設定了左區塊float:left;，會先得下圖的樣子

我們把左區塊改成只有外框的情況可以看到，其實左區塊是浮在上層，而沒設定寬值的右區塊現在是跟外框一樣寬的狀態，也就是有一部份是被左區塊遮住的

我們可以利用margin-left把右區塊往右推讓寬度變小，這時候右區塊的內容就可以完整地顯示出來了，就像是下圖模擬的剖面

也就是在右區塊加上margin-left:(左區塊寬 + 間距);的屬性就可以了

當然因為左區塊的寬度會影響右區塊的margin-left要設定多寬，所以這部份的數值也要計算好才行

附上完成的CSS

.outside {
	background-color: #FF0;
	width: 510px;
	overflow: auto;
	margin: 20px 0;
	padding: 10px;
}
#left{
	height: 90px;
	width: 200px;
	background-color: #69F;
	float: left;
}
#right{
	height: 100px;
	background-color: #6C6;
	width: auto;
	margin-left: 210px;
}

改變外框寬度

上面介紹的3種方式最大的不同就是當外框寬度被改變時所得到的結果

如上圖結果所示，第1、2種方式都需要再調整右區塊的寬度，而左區塊則不需要，所以在不確定外框寬度時採用第3種方式是比較輕鬆的方式。