CSS頁(yè)面布局技術(shù)允許我們拾取網(wǎng)頁(yè)中的元素，并且控制它們相對(duì)正常布局流、周邊元素、父容器或者主視口/窗口的位置。
正常布局流
正常布局流，即我們所說的文檔流，是原生的、未經(jīng)人為刻意控制的瀏覽器默認(rèn)的HTML布局排版方式。
“霸道”的塊級(jí)元素，從上往下，另起一行；“溫柔”的內(nèi)聯(lián)元素（最常見的文字），從左到右依次緊挨著排布。一個(gè)元素的性格是“霸道”或是“溫柔”，通常出生時(shí)便已確定，但我們可以刻意地通過display屬性的設(shè)置來“調(diào)教”它的性格，亦霸道（display:block），亦溫柔（display:inline），亦或霸道兼溫柔（diaplsy:inline-block）。
浮動(dòng)
通常元素默認(rèn)是不浮動(dòng)的，即浮動(dòng)屬性為none。使用浮動(dòng)的“調(diào)教”后，我們便能讓兩個(gè)塊級(jí)元素從默認(rèn)的垂直布局變?yōu)樗讲季帧?br>
注意：子元素設(shè)置float屬性后，通常需要在其父元素設(shè)置清除浮動(dòng)的樣式，即在父元素添加一個(gè).clearfix的類，樣式為
.clearfix::after{
content: '';
display: block;
clear: both;
}
這樣，如果那個(gè)元素需要清除浮動(dòng)，直接多加一個(gè).clearfix的類名即可，一勞永逸。這里利用的偽元素的一些特性。
左右布局
1. 簡(jiǎn)單的左右布局
HTML代碼
<body>
<div class="father clearfix">
<div class="left">我在左</div>
<div class="right">我在右</div>
</div>
</body>
CSS樣式
.father{
border:1px solid black;
}
.left{
background:red;
width:40%;
float:left;
}
.right{
background:yellow;
width:40%;
float:right;
}
.clearfix::after{
content:'';
display:block;
clear:both;
}
效果
如果父元素沒有添加.clearfix類，則會(huì)出現(xiàn)父元素沒有高度的bug，如圖
2. 左側(cè)固定，右側(cè)自適應(yīng)布局（float + margin）
2.1 左側(cè)左浮動(dòng)，右側(cè)設(shè)置margin-left
html代碼
<body>
<div class="left"></div>
<div class="main"></div>
</body>
CSS代碼
.left{
width:200px;
height:100px;
background:#abcdef;
float:left;
}
.main{
height:100px;
background:#777;
margin-left:200px;
}
2.2 利用浮動(dòng)和負(fù)外邊距來進(jìn)行左邊固定右邊自適應(yīng)的布局，與上面有些許不同，可以仔細(xì)琢磨下兩這有何區(qū)別
html
<body>
<div class="left"></div>
<div class="wrap">
<div class="main"></div>
</div>
</body>
CSS
.left{
width:200px;
height:100px;
background:#abcdef;
float:left;
margin-right:- 200px; /*如果不設(shè)置負(fù)右外邊距，.warp會(huì)被擠到下一行；設(shè)置多大呢？絕對(duì)值大于等于左邊欄目寬度即可*/
}
.wrap{
width:100%;
height:100px;
background:#777;
}
.main{
margin-left:200px; /*等于左邊欄的寬度*/
background:orange;
height:100px;
}
效果
這里第二部分用了一個(gè)div進(jìn)行包裹，如果不是很好理解，可以粘貼代碼到js.bin看看效果，然后打開開發(fā)者工具進(jìn)行調(diào)試。
左中右布局
左中右布局的實(shí)現(xiàn)由很多種，大體可分為傳統(tǒng)的浮動(dòng)+margin和絕對(duì)定位+margin，現(xiàn)代比較“潮”的flex彈性盒子布局，以及科技含量更高的Grid布局。
- 浮動(dòng)+margin
- 絕對(duì)定位+margin
- flex彈性盒子
- Grid柵格
浮動(dòng)+margin
左欄左浮動(dòng)，右欄右浮動(dòng)，主體直接放后面，就實(shí)現(xiàn)了自適應(yīng)三欄布局。
這種布局需要注意主體main標(biāo)簽必須放在最后，左右隨意，一定要注意div書寫的順序。
html代碼
<body>
<div id="left"></div>
<div id="right"></div>
<div id="main"></div>
</body>
CSS代碼
html,body{
margin:0;
height:100%;
}
#main{
height:100%;
margin:0 210px;
background:#ffe6b8;
}
#left,#right{
width:200px;
height:100%;
background:#a0b3d6;
}
#left{
float:left;
}
#right{
float:right;
}
效果
浮動(dòng)+margin負(fù)值法
首先，中間的主體要使用雙層標(biāo)簽。外層div寬度100%顯示，并且浮動(dòng)，內(nèi)層div為真正的主體內(nèi)容，含有左右210像素的margin值。左欄與右欄都是采用margin負(fù)值定位的，左欄左浮動(dòng)，margin-left為-100%，由于前面的div寬度100%與瀏覽器，所以這里的-100% margin值正好使左欄div定位到了頁(yè)面的左側(cè)；右側(cè)欄也是左浮動(dòng)，其margin-left也是負(fù)值，大小為其本身的寬度即200像素。
html
<body>
<div id="main">
<div id="body"></div>
</div>
<div id="left"></div>
<div id="right"></div>
</body>
CSS
html,body{margin:0; height:100%;}
#main{width:100%; height:100%; float:left;}
#body{margin:0 210px; background:#ffe6b8; height:100%;}
#left,#right{width:200px; height:100%; float:left; background:#a0b3d6;}
#left{margin-left:-100%;} /*本來在屏幕外，通過負(fù)外邊距想坐移了一個(gè)屏幕的寬度*/
#right{margin-left:-200px;} /*同上，本來自屏幕外，向左移了自身寬度的長(zhǎng)度*/
這種方法較難理解，推薦動(dòng)手利用開發(fā)者工具調(diào)試調(diào)試。
絕對(duì)定位+margin
左右兩欄采用絕對(duì)定位，分別固定于頁(yè)面的左右兩側(cè)，中間的主體欄用左右margin值撐開距離。于是實(shí)現(xiàn)了三欄自適應(yīng)布局。div順序沒有要求。
html
<body>
<div id="left"></div>
<div id="right"></div>
<div id="main"></div>
</body>
CSS
html,body{
margin:0;
height:100%;
}
#left,#right{
position:absolute;
top:0;
width:200px;
height:100%;
}
#left{
left:0;
background:#a0b3d6;
}
#right{
right:0;
background:#a0b3d6;
}
#main{
margin:0 210px;
background:#ffe6b8;
height:100%;
}
在用絕對(duì)定位時(shí)，通常會(huì)在其父元素使用相對(duì)定位，即position:absolute和position:relative是成對(duì)出現(xiàn)的，兩者相輔相成。
flex布局
給父元素（Flex容器）設(shè)置 display:flex；子元素（Flex項(xiàng)目）會(huì)默認(rèn)排成一行，通過設(shè)置容器或項(xiàng)目的各種屬性來改變項(xiàng)目布局的方式。
.father{
display: flex;
justify-content:space-between;
}
參考博文：張?chǎng)涡?/a>
