在網頁上的布局比較經典的是兩欄布局和三欄布局。下面簡單總結自己對這兩種布局的實現過程。
兩欄布局
兩欄布局是主內容區為主，左（右）側有一欄，代碼如下：
<style>
#header, #footer{
height: 100px;
background: red;
}
#content .main{
height: 200px;
background: green;
overflow: auto;
}
#content .aside{
height: 200px;
width: 100px;
background: blue;
float: left;
}
</style>
<body>
<div id="header"></div>
<div id="content">
<div class="aside"></div>
<div class="main">
main main main main main main
</div>
</div>
<div id="footer"></div>
</body>
- 要點：將側邊區塊<aside>域浮動，<aside>浮動后覆蓋綠色<main>, 再將<main> overflow:auto，形成BFC，形成獨立區域，達到效果。
方法二：使用負邊距
代碼例子：
<style type="text/css">
html,body{
padding: 0;
margin: 0;
}
#header, #footer{
height: 100px;
background: red;
overflow: hidden;
}
#main{
overflow: auto;
}
#main .center{
height: 200px;
width: 100%;
float: left;
}
.center .content{
height: 200px;
background: green;
margin-right: 100px;
}
#main .aside{
height: 200px;
width: 100px;
background: blue;
float: left;
margin-left: -100px;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="main">
<div class="center">
<div class="content">
我是主區塊 我是主區塊 main main main
</div>
</div>
<div class="aside"></div>
</div>
<div id="footer">footer</div>
- 元素
content添加父元素，設置左浮動，寬度為100%； -
content設置右邊距，寬度為aside的寬度（留出aside浮上來的空間）； -
aside左浮動，并設置負邊距，等于自身寬度。
三欄布局是在兩欄的基礎上完成：
-
content設置左右邊距，寬度等于side1寬度，side1左浮動，side1負邊距設為-100%。 -
side2左浮動，設置負邊距等于自身寬度值。
