【筆記】浮動屬性float的應用08——液體兩列布局（所有步驟組合在一起）
第1步 - 從語義標記的程式碼開始
要將頁面佈置為兩列，您需要從基本頁面結構開始。在這種情況下，我們將使用一些虛擬內容來建立兩列模板。該頁面已被分為五個獨立的div，每個div都被賦予一個唯一的ID選擇器。div被標記; “容器”（包裹整個頁面的內容），“top”（用於頂部橫幅），“leftnav”（用於較小的左列），“content”（用於主要內容）和“footer”（用於頁面底部的頁尾）。
第2步 - 為容器新增寬度和邊距
要使內容從瀏覽器視窗（或視口）的邊緣進入，我們需要在包含內容的主div上設定寬度和邊距。
在這種情況下，我們將使用90％的寬度，因此使用的CSS宣告是：“width：90％”。可以使用任何寬度，包括100％，這將強制內容到視口的左邊緣和右邊緣。
要將div放在視口中心，我們將左側和右側的“自動”邊距應用。要將div從視口的頂部和底部移開，我們使用10px的邊距。這些可以組合成一個簡寫的CSS宣告：“margin：10px auto”。這將在頂部和底部應用10px的邊距，向左和向右應用自動邊距。
某些瀏覽器（特別是Win / IE5和Win / IE5.5）不支援自動左右邊距。但是，通過新增兩個簡單的規則，這些瀏覽器將正確地居中包含塊。
#container
{
width: 90%;
margin: 10px auto;
}
第3步 - 新增顏色，背景顏色和邊框
要為主div新增顏色和背景顏色，請使用“background-color：#fff;” 和“顏色：＃333;”。
要將邊框應用於div，請使用“border：1px solid grey;”。
#container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
}
第4步 - 新增行高
要提高可讀性，可以增加文字的整體行高。如果它應用於此主div，它將在下面的所有div中級聯。規則可以寫成“line-height：130％;”。
line-height: 130%;
第5步 - 設定頂部橫幅的樣式
要設定頂部div的樣式，我們將在底部設定背景顏色，填充和邊框。這三個宣告將是：“padding：.5em;” 新增填充到div，“background-color：#ddd;” 新增背景顏色和“border-bottom：1px solid grey”以將邊框應用於div的底部。
#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}
第6步 - 從h1中刪除邊距和填充
在頂部橫幅內有一個H1標籤。我們希望單詞從div的頂部和左邊緣坐下.5em。瀏覽器在H1上方新增不同數量的填充，最簡單的方法是從H1中移除所有填充和邊距，並讓div提供填充。這是通過使用後代選擇器來實現的 - “＃top h1 {padding：0; margin：0;}”。
#top h1
{
padding: 0;
margin: 0;
}
第7步 - 將“float”應用於leftnav
要浮動左側導航，我們需要使用規則：“＃leftnav {float：left;}”。當div設定為float時，還必須包含寬度，因此我們可以新增另一個宣告：“width：160px;”。
#leftnav
{
float: left;
width: 160px;
}
第8步 - 向leftnav新增邊距和填充
接下來，我們將邊距設定為“0”，新增1em的填充（這將使文字遠離div的邊緣）。
margin: 0;
padding: 1em;
第9步 - 將邊距設定為“content”div
下一步是整個過程中最重要的一步。“leftnav”div已經浮動，因此來自“content”div的文字將沿其左邊緣向下流動，然後在其下方環繞。為了使文字顯示在新列中，我們將margin-left應用於“content”div，確保寬度大於“leftnav”div的總寬度。在這種情況下，我們將使用“margin-left：200px”，這將在leftnav和主要內容之間給出40px的餘量。
我們還將在“content”div的左側應用邊框。如果“leftnav”div比主要內容長，這可能是一個問題。如果是這種情況，邊框可以應用於“leftnav”div的右側而不是“content”div。
#content
{
margin-left: 200px;
border-left: 1px solid gray;
}
步驟10 - 向“content”div新增填充
要向內容div新增填充，請使用“padding：1em;”。
padding: 1em;
第11步 - 設定頁尾樣式
要設定頁尾樣式，我們首先需要將其設定為“clear：both”。這很關鍵，因為它會將頁尾強制置於上方任何浮動元素下方。然後我們新增“padding：.5em”和“margin：0”。
#footer
{
clear: both;
margin: 0;
padding: .5em;
}
第12步 - 為頁尾新增顏色和背景顏色
要向頁尾新增顏色和背景顏色，請使用以下宣告：“color：＃333;” 和“background-color：#ddd;”。
color: #333;
background-color: #ddd;
步驟13 - 向頁尾新增邊框
要在頁尾頂部新增邊框，請使用“border-top：1px solid grey;”。
border-top: 1px solid gray;
第14步 - 刪除頂部邊距
要刪除“leftnav”和“content”div中內容上方的空格，請使用以下規則：“＃leftnav p {margin：0 0 1em 0;}”和“#content h2 {margin：0 0 .5em 0; }”。
瀏覽器在段落和標題之上使用不同數量的邊距。刪除所有頂部邊距是安全的，只要有底部邊距以保持段落和標題與它們下面的元素分開。
#leftnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }
步驟15 - 設定最大行長度
如果要在主要內容上設定最大寬度，可以通過新增新規則來執行此操作：“＃content {max-width：36em;}”。
雖然IE瀏覽器會忽略此規則，但其他符合標準的瀏覽器將不允許內容區域擴充套件到36em - 將線條長度保持在舒適的寬度。
#content { max-width: 36em; }
完了！
程式碼如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
width:90%;
margin:10px auto;
background-color:#fff;
color:#333;
border:1px solid gray;
line-height:130%;
}
#top {
padding:0.5em;
background-color:#ddd;
border-bottom:1px solid gray;
}
#top h1 {
padding: 0;
margin:0;
}
#leftnav {
float:left;
width:160px;
margin:0;
padding:1em;
}
#content {
margin-left:200px;
border-left:1px solid gray;
padding:1em;
max-width:36em;/*new codes*/
}
#footer {
clear:both;
margin:0;
padding:0.5em;
color:#333;
background-color:#ddd;
border-top:1px solid gray;
}
#leftnav p {
margin:0 0 1em 0;
}
#conteent h2 {
margin:0 0 0.5em 0;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>效果圖如下：
