CSS頁面布局技術(shù)允許我們拾取網(wǎng)頁中的元素，并且控制它們相對正常布局流郊尝、周邊元素傻丝、父容器或者主視口/窗口的位置茵肃。
正常布局流
正常布局流，即我們所說的文檔流辐烂，是原生的遏插、未經(jīng)人為刻意控制的瀏覽器默認(rèn)的HTML布局排版方式。
“霸道”的塊級元素纠修，從上往下胳嘲，另起一行；“溫柔”的內(nèi)聯(lián)元素（最常見的文字）扣草，從左到右依次緊挨著排布了牛。一個元素的性格是“霸道”或是“溫柔”，通常出生時便已確定辰妙，但我們可以刻意地通過display屬性的設(shè)置來“調(diào)教”它的性格鹰祸，亦霸道（display:block），亦溫柔（display:inline）密浑，亦或霸道兼溫柔（diaplsy:inline-block）蛙婴。
浮動
通常元素默認(rèn)是不浮動的，即浮動屬性為none尔破。使用浮動的“調(diào)教”后街图，我們便能讓兩個塊級元素從默認(rèn)的垂直布局變?yōu)樗讲季帧?br>
注意：子元素設(shè)置float屬性后，通常需要在其父元素設(shè)置清除浮動的樣式懒构，即在父元素添加一個.clearfix的類餐济，樣式為
.clearfix::after{
content: '';
display: block;
clear: both;
}
這樣，如果那個元素需要清除浮動胆剧，直接多加一個.clearfix的類名即可絮姆，一勞永逸。這里利用的偽元素的一些特性。
左右布局
1. 簡單的左右布局
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類滚朵，則會出現(xiàn)父元素沒有高度的bug冤灾，如圖
2. 左側(cè)固定，右側(cè)自適應(yīng)布局（float + margin）
2.1 左側(cè)左浮動辕近，右側(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 利用浮動和負(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會被擠到下一行；設(shè)置多大呢椿疗？絕對值大于等于左邊欄目寬度即可*/
}
.wrap{
width:100%;
height:100px;
background:#777;
}
.main{
margin-left:200px; /*等于左邊欄的寬度*/
background:orange;
height:100px;
}
效果
這里第二部分用了一個div進(jìn)行包裹漏峰，如果不是很好理解，可以粘貼代碼到js.bin看看效果届榄，然后打開開發(fā)者工具進(jìn)行調(diào)試浅乔。
左中右布局
左中右布局的實(shí)現(xiàn)由很多種，大體可分為傳統(tǒng)的浮動+margin和絕對定位+margin铝条，現(xiàn)代比較“潮”的flex彈性盒子布局靖苇，以及科技含量更高的Grid布局。
- 浮動+margin
- 絕對定位+margin
- flex彈性盒子
- Grid柵格
浮動+margin
左欄左浮動班缰，右欄右浮動贤壁，主體直接放后面，就實(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;
}
效果
浮動+margin負(fù)值法
首先名船，中間的主體要使用雙層標(biāo)簽。外層div寬度100%顯示旨怠，并且浮動渠驼，內(nèi)層div為真正的主體內(nèi)容，含有左右210像素的margin值运吓。左欄與右欄都是采用margin負(fù)值定位的渴邦，左欄左浮動，margin-left為-100%拘哨，由于前面的div寬度100%與瀏覽器谋梭，所以這里的-100% margin值正好使左欄div定位到了頁面的左側(cè)；右側(cè)欄也是左浮動倦青，其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ù)外邊距想坐移了一個屏幕的寬度*/
#right{margin-left:-200px;} /*同上隘庄，本來自屏幕外踢步，向左移了自身寬度的長度*/
這種方法較難理解，推薦動手利用開發(fā)者工具調(diào)試調(diào)試丑掺。
絕對定位+margin
左右兩欄采用絕對定位获印，分別固定于頁面的左右兩側(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%;
}
在用絕對定位時唆缴，通常會在其父元素使用相對定位鳍征，即position:absolute和position:relative是成對出現(xiàn)的，兩者相輔相成面徽。
flex布局
給父元素（Flex容器）設(shè)置 display:flex艳丛；子元素（Flex項(xiàng)目）會默認(rèn)排成一行，通過設(shè)置容器或項(xiàng)目的各種屬性來改變項(xiàng)目布局的方式趟紊。
.father{
display: flex;
justify-content:space-between;
}
參考博文：張鑫旭
