這篇文章主要介紹了CSS實現頁面一列佈局，兩列佈局與三列佈局的方法示例,包括寬度與高度的自適應的示例,需要的朋友可以參考下：
1.一列佈局（又叫單列佈局）
一列佈局需要掌握3個知識點：標準文件流，其中又包含了區塊級元素和行級元素，還有margin屬性，可以說實現一列佈局的關鍵程式碼就是由margin屬性實現的，透過設定margin:0 auto;來實現水平居中，auto就是它會根據瀏覽器的寬度自動設定兩邊的外邊距。要設定margin，你首先得有一個盒子模型，例如這裡的div，然後設定它的長寬，有一個固定的大小，才可以實現居中。
<style type="text/css">
body{margin:0;padding:0;}
.head{heigth:200px;background:blue;}
.main{height:500px;width:800p;margin:0 auto;}
.footer{background:blue;height:200px;width:800px;margin:0 auto;}
</style>
<div class="head"> This is head !</div>
<div class="main"> This is main !</div>
<div class="footer"> This is footer !</div>2.二列佈局（兩列自適應）
浮動：
塊級元素都是一行一行這樣排列的，需要把兩個塊級元素並排時，就需要用到CSS中的浮動佈局float，float有三個屬性值，
left-左浮動，right-右浮動，none-不浮動，一旦設定了float屬性，元素就會對應的向左移，或向右移，直到碰到容器邊緣，
當元素沒有內容但是設定了浮動屬性時，元素的寬度會隨內容的變化而變化。
清除浮動的常用方法是：clear：both；（為需要清楚浮動的元素設定）如果你清楚的知道設定了那種浮動，也可以clear：right/left，一般都用both，保障浮動被清除；還有另一種清除浮動的方法，width:100%;overflow:hidden;
<style type="text/css">
body{margin:0;padding:0;}
.main{width:800px;margin:0 auto;}
.left{width:20%;height:500px;background:blue;float:left;}
.right{width:80%;background:red;height:500px;float:right;}
</style>
<div class="main">
<div class="left"> This is left !</div>
<div class="right"> This is right !</div>
</div>添加了父級div後，right和left塊就被限制在父級塊中，父級塊寬度是固定的，則左右兩塊的寬度也隨之固定，但是如果父級塊的寬度改變，則左右兩塊也會隨之改變，且比例還是2：8，這個是固定不變的。
3.三列佈局
position可設定4個屬性值，分別為：static（靜態定位），relative（相對定位），absolute（絕對定位），fixed（固定定位）
三列佈局自適應，將上述兩列佈局中的比例更改為33.33%即可，那麼以此類推，四列佈局自適應也可以用一樣的方法，調整比例分配，從而實現自己想要的佈局方式。
<style type="text/css">
body{margin:0;padding:0;}
.main{width:800px;margin:0 auto;}
.left{width:33.33%;height:500px;background:blue;float:left;}
.middle{width:33.33%;height:500px;background:black;float:left;}
.right{width:33.33%;background:red;height:500px;float:right;}
</style>
<div class="main">
<div class="left"> This is left !</div>
<div class="middle"> This is middle !</div>
<div class="right"> This is right !</div>
</div>另外一種情況是，左右兩塊的寬度都是固定的分別為200px，300px，而中間是自適應的。這種情況就不能透過float來實現了，此時我們需要對左右兩塊進行絕對定位，然後設定中間塊的margin，則可以實現要求。如果你想讓中間和左右兩塊不要緊密貼合，則可以在設定margin（上，右，下，左）時，把像素適當的提高。實作方式如下：
注意left:0;top:0；right:0;top:0; 這些設定是必須的，不加就會出問題，親測
<style type="text/css">
body{margin:0;padding:0;}
.main{width:800px;margin:0 auto;}
.left{width:200px;height:500px;background:blue;position:absolute;left:0;top:0;}
.middle{height:500px;background:black;margin:0 300px 0 200px;}
.right{width:300px;background:red;height:500px;position:absolute;right:0;top:0;}
</style>
<div class="main">
<div class="left"> This is left !</div>
<div class="middle"> This is middle !</div>
<div class="right"> This is right !</div>
</div>在網頁設計中，我們更多的是將上述佈局方式進行混合，例如在一列佈局的main區塊中插入二列或三列佈局，程式碼和上基本上一致
使用BFC的原理實作
BFC的規則之一，就是BFC區域，不會與float box重疊，因此我們可以利用這一點來實現3列佈局。
css程式碼如下
.left {
float: left;
margin-right: 10px;
width: 100px;
height: 100px;
background-color: orange;
}
.rightright {
float: rightright;
margin-left: 10px;
width: 100px;
height: 100px;
background-color: orange;
}
.main {
height: 100px;
background-color: green;
overflow: hidden;
}html程式碼如下
<div class="left"></div> <div class="right"></div> <div class="main"></div>
雙飛翼佈局
這種佈局方案最早由淘寶提出，主要為了主列能夠被最先載入。
實作原理：
（1）讓主列外面增加一個wrap，主列wrap，以及2子列都左浮動。
（2）設定主列wrap寬度為100%，將子列的margin-left設定為負值，讓子列能夠排列在左右兩側。
（3）這是主列的margin-left與margin-right比左右兩列的寬度大一點，則可以設定出來主列與子列之間的間隙。
css程式碼如下
.wrap {
width: 100%;
}
.wrap::after {
display: block;
content: '';
font-size: 0;
height: 0;
clear: both;
zoom: 1;
}
.main-content {
float: left;
width: 100%;
}
.main {
height: 100px;
background-color: green;
margin-left: 110px;
margin-right: 110px;
}
.left {
float: left;
width: 100px;
height: 100px;
background-color: orange;
margin-left: -100%;
}
.rightright {
float: left;
width: 100px;
height: 100px;
background-color: orange;
margin-left: -100px;
}html程式碼如下
<div class="wrap">
<div class="main-content">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>聖杯佈局
聖杯佈局在結構上要簡單一點，也能夠讓主列優先載入。
實作原理：
（1）增加一個包裹框，設定padding-leftpadding-right值，比子列寬度大一個空隙的寬度。
（2）主列，子列都設定為float: left 左子列margin-left設定為-100%，並且設定為position:relative; left: -110px將左子列放置到左側。右子列同理。
（3）主列只需設定寬度為100%即可。包裹框的寬度不要設定為100%，自適應即可。
css程式碼如下
.wrapper {
padding-left: 110px;
padding-right: 110px;
overflow: hidden;
}
.main {
float: left;
width: 100%;
height: 100px;
background-color: #ccc;
}
.left {
float: left;
width: 100px;
height: 100px;
margin-left: -100%;
position: relative;
left: -110px;
_left: 0;
background-color: orange;
}
.rightright {
float: left;
width: 100px;
height: 100px;
background-color: orange;
margin-left: -100px;
position: relative;
rightright: -110px;
}html程式碼如下
<div class="wrapper"> <div class="main"></div> <div class="left"></div> <div class="right"></div> </div>
