一：居中效果實現小結
1，文本居中
文本水平居中：text-align:center;
文本垂直居中：①設置line-height=父元素的height （單行文本）；②通過設置padding-top、padding-bottom
2，盒子水平居中：
① margin:0 auto; 該盒子需設置了width，不然其width默認爲:auto，此時會把值爲auto的margin的值改爲0
② 使用絕對定位 ，注意其父盒子要設置定位，position值不爲static，常用的是設置爲相對定位，即子絕父相
width: 100px;
position: absolute;
left: 50%;
/* 設置負左外邊距，其值爲自身寬度的一半 */
margin-left: -50px;.parent {
text-align: center;
}
.child {
display: inline-block;
}④使用絕對定位
/* 其父盒子需要設置值不爲static的定位，常用相對定位 */
position: absolute;
left: 50%;
/* 不知道盒子自身的寬度；IE9開始支持 */
transform: translate(-50%,0);⑤flex佈局
.parent {
display: flex;
justify-content: center;
}3，盒子垂直居中
①通過設置display屬性
.parent {
/* 注意，使用這種方式會導致其margin失效 */
display: table-cell;
vertical-align: middle;
}②使用絕對定位，注意其父盒子要設置定位，position值不爲static，常用的是設置爲相對定位
height: 100px;
position: absolute;
top: 50%;
/* 設置負上外邊距，其值爲自身高度的一半 */
margin-top: -50px;/* 其父盒子需要設置值不爲static的定位，常用相對定位 */
position: absolute;
top: 50%;
/* 可在盒子高度自適應下實現垂直居中；IE9開始支持 */
transform: translate(0,-50%);④flex佈局
.parent {
display: flex;
align-items: center;
}二：清除浮動小結
清除浮動：不是刪除浮動，而是清除浮動的影響。
1，使用clear
clear: left | right | both | none 應用於塊級元素
如：h3 {clear:left;} 確保h3元素左邊沒有浮動元素
clear工作原理：CSS1和CSS2中，增加元素的上外邊距
CSS2.1中，在元素上外邊距之上增加額外間隔（即清除區域），並不改變元素的外邊距
缺點：靠近浮動元素那邊的margin會失效
2，給浮動元素的祖先元素加高度
有高度的盒子才能關住浮動
缺點：直接設置height不好，高度最好讓內容去自然撐高
3，隔牆法：
在兩部分浮動之間加一個有高度的div，並設置其clear屬性。
內牆法：
<div>
<div class="fl">浮動元素</div>
<!-- 在下面加一個設置clear屬性的元素，這樣浮動就不會對後面的元素造成影響了 -->
<div class="cl">這可看作是一道內牆</div>
</div>4，偏方：設置overflow:hidden;（慎用，原因見下文）
5,使用僞元素，推薦使用這種方法
/* 使用僞元素:after清除浮動 #版本一# */
.clearfix:after{
visibility:hidden;
display:block;
clear:both;
content:"";
font-size:0;
height:0
}
/* 下面是用來解決ie6，7浮動問題 */
.clearfix{*zoom:1}; /* #版本二# */
.clearfix:after {
content:"\200B";
display:block;
height:0;
clear:both;
}
.clearfix {*zoom:1;}/* #版本三# （推薦使用） */
/* 同時加入:before以解決現代瀏覽器上邊距摺疊的問題 */
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}補充：BFC
BFC(Block formatting context)直譯爲"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何佈局，並且與這個區域外部毫不相干。
BFC的主要特徵: 1.BFC容器是一個隔離的容器，和其他元素互不干擾；所以我們可以用觸發兩個元素的BFC來解決垂直邊距摺疊問題。 2.BFC可以包含浮動；通常用來解決浮動父元素高度坍塌的問題。
能夠觸發(Block Formatting Context)BFC的方式有：
根元素html；
float的值不爲none；
overflow的值不爲visible；
display的值爲table-cell, table-caption, inline-block,flex,inline-flex中的任何一個；
position的值不爲relative和static。
通過overflow閉合浮動，實際上已經創建了新的 塊級格式化上下文，這將導致其佈局和相對於浮動的行爲等發生一系列的變化，閉合浮動只不過是一系列變化中的一個作用而已。所以爲了閉合浮動去改變全局特性，這是不明智的，帶來的風險就是一系列的bug;始終要明白，如果單單只是需要閉合浮動，overflow就不要使用
三：三欄佈局小結
1，聖盃佈局
聖盃佈局：給父容器設置height和左右padding；主子容器放在最前以優先加載，子容器全部左浮動，靠設置負margin和相對定位來實現兩欄、三欄佈局、多欄佈局
優點: 1.使主要內容列先加載。
2.允許任何列是最高的。
3.沒有額外的div。
4.需要的hack很少
注：使用聖盃佈局三欄佈局時，若中間欄的寬度小於左右定寬欄的寬度時，佈局就會發生紊亂！！！使用雙飛翼佈局不存在這種問題；左右兩欄設置百分數寬度也可以避免這種問題。
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.header,.footer{
height: 100px;
text-align: center;
background-color: green;
}
span,h4{
font-size: 20px;
line-height: 100px;
}
.container{
height: 250px;
/* 這裏的10%是相對視窗的 */
padding:0 10%;
/* padding: 0 200px; */
}
.main{
width: 100%;
height: 250px;
background-color: #E14E14;
float: left;
}
.left,.right{
/* 爲什麼是12.5%？ */
/* 這裏的12.5%是相對其父元素的寬度的，其父元素的寬度爲視窗的80%(去掉左右padding)， */
/* 所以有12.5*0.8=10，這樣就剛好等於視窗的padding的寬度了 */
width: 12.5%;
/* width: 200px; */
height: 250px;
float: left;
/* 爲什麼要用相對定位？因爲右邊一欄只通過設置margin無法實現*/
position: relative;
}
.left{
background-color: #1077DB;
margin-left: -100%;
left: -12.5%;
/* left: -200px; */
}
.right{
background-color: #617608;
margin-left: -12.5%;
right: -12.5%;
/* margin-left: -200px; */
/* right: -200px; */
}
</style>
<body>
<div class="header">
<h4>Header</h4>
</div>
<div class="container">
<div class="main">
<p>main</p>
</div>
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
</div>
</div>
<div class="footer">
<span>Footer</span>
</div>
</body>2，雙飛翼佈局
相比聖盃佈局，雙飛翼不必設置左右欄的position: relative，也不必設置左右left、right值，只需多添加一個子元素包含，相應的padding換成margin
雙飛翼佈局的好處：1.主要的內容先加載的優化; 這是用聖盃佈局和雙飛翼佈局的主要原因！！！
2.兼容目前所有的主流瀏覽器，包括IE6在內；
3.實現不同的佈局方式，可以通過調整相關CSS屬性即可實現。
<style type="text/css">
body,div{
padding: 0;
margin: 0;
}
.header,.footer{
height: 100px;
text-align: center;
background-color: green;
}
span,h4{
font-size: 20px;
line-height: 100px;
}
.container{
overflow: hidden;
}
.main{
width: 100%;
height: 250px;
background-color: #E14E14;
float: left;
/* main本身設置了100%的寬度，所以再設置margin、padding都會使其真實佔有寬度超過其父容器， */
/* 所以這裏應該給main的子容器設置margin */
}
.main-inner{
/*margin: 0 10%;*/
margin: 0 200px;
}
.left,.right{
/*width: 10%;*/
width: 200px;
height: 250px;
float: left;
}
.left{
background-color: #1077DB;
margin-left: -100%;
}
.right{
background-color: #617608;
/*margin-left: -10%;*/
margin-left: -200px;
}
</style>
<body>
<div class="header">
<h4>Header</h4>
</div>
<!-- 這裏container可以不需要 -->
<div class="container">
<div class="main">
<div class="main-inner">
<p>main</p>
</div>
</div>
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
</div>
</div>
<div class="footer">
<span>Footer</span>
</div>
</body>3，一般三欄/多欄佈局
佈局思想：先左右浮動，然後中欄設置margin
這種佈局必須把左右浮動放前面，中欄放最後面，所以無法做到像聖盃佈局、雙飛翼佈局那樣可以讓主要內容優先加載！
body,div,p{
padding: 0;
margin: 0;
}
.container{
overflow: hidden;
}
.left{
float: left;
width: 200px;
height: 400px;
background-color: green;
}
.right{
float: right;
width:200px;
height: 400px;
background-color: gray;
}
.middle{
margin: 0 220px;
height: 400px;
background-color: #9AA507;
}4，Flex佈局
待更新...