經常使用CSS佈局

1.導航條垂直居中

導航條nav 從左到右分爲 nav-left , nav-mid , nav-mid ，怎樣達到從左到右依次排列，且所有垂直居中的效果呢？
所有設置 float:left , 這樣以後才能夠方便的使 nav-left, nav-right, nav-right 都垂直居中，只須要設置一次父元素nav的 line-height 等於它的 height 就能夠啦~

1.1 ul>li>a 構成的導航條內部導航水平居中：
ul設置 text-align:center;
li和a都設置 display: inline-block;

2.清除父元素的浮動

假設父元素爲 wrap ，未設置高度，包含三個子元素 left mid right，須要實現水平三列布局。
首先，對left mid right 三部分應用 float: left;並設置合理的寬度，假設都爲30%
這時因爲內部元素所有浮動而脫離文檔流，致使父包含塊高度沒法被撐開，縮成了一條。下面，須要對父包含塊作清除浮動。
此時，clear:both; 是很差用的，由於它只能應用於清除左側或右側的浮動。

方法1、overflow: hidden;

咱們須要對父元素應用overflow: hidden; 來清除浮動。原理是 overflow 的值只要不是默認值visible，就觸發了 BFC。
而 BFC 是傲嬌的小公舉，有她本身的佈局規則：

內部的Box會在垂直方向，一個接一個地放置。
Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊 每一個元素的margin box的左邊，
與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。 BFC的區域不會與float
box重疊。 BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
計算BFC的高度時，浮動元素也參與計算

注意最後一條，由於計算BFC高度時，浮動元素也參與計算，因此父元素的高度被撐開。而這也正符合包含塊未設置高度（height: auto;）時的裁切準則。由於包含塊高度（height: auto;），因此永遠不會出現內容超出包含塊的狀況，所以overflow:hidden應用後，須要計算內部全部元素高度才能進行裁切。

補充下哪些元素會生成BFC：

根元素
float屬性不爲none
position爲absolute或fixed
display爲inline-block,table-cell, table-caption, flex, inline-flex
overflow不爲visible

方法2、clearfix:after{ ... }

clear屬性清除浮動通用方案：.clearfix:after{ ... } 其實是添加了一個看不見的元素。

主要代碼：

.clearfix: after {
  content: " ";
  display: block;
  clear: both;
  //用於清除浮動：設置了clear:both的塊級元素能夠清除浮動
  overflow: hidden;
  visibility: hidden;
}

將clearfix這個class添加到浮動元素的父元素上，就清除了由於子元素浮動縮成一條的父元素的影響，完整代碼見：
jsfiddle栗子

3.水平三列等寬佈局

水平三列等寬佈局 當頁面寬度變化時，怎樣一直保持三列始終均勻的居中顯示？
（實在不知道該怎樣簡潔的描述「均勻的居中」。。。意思就是左右兩列與頁面之間的間隙，以及列與列之間的間隙，這四塊間隙同樣寬。）
其實就是考算術的。按照設計稿樣式計算3個列以及4個空隙的百分比寬度，讓它們相加約等於100%，好比 26% * 3 + 5% * 4 = 78% + 20% = 98%

//html
<div class="wrap">
    <div class="left">left</div>
    <div class="mid">middle</div>
    <div class="right">right</div>
</div>
//css
.wrap {
  margin: 0 auto;
  width: 400px;
  background: yellow;
  overflow: hidden;
}
.left, .mid, .right {
  float: left;
  margin-left: 5%;
  width: 26%;
}
.left {
  background: blue;
}
.mid {
  background: pink;
}
.right{
  background: red;
}

效果就是下圖介樣子：

更多方法參考這篇文章：頁面架構之等分佈局

4.三行自適應佈局：header（定高） + main（高度自適應） + footer（定高）

方法1、position

jsfiddle中的栗子

//html
<div class="header">header</div>
<div class="main">
  <div class="content">content</div>
</div>
<div class="footer">footer</div>

//css
.header {position: absolute;top: 0;left: 0; width: 100%; height: 100px;background-color: pink;}
.footer {position: absolute;bottom:0;left:0; width: 100%;height: 100px;background-color: pink;}

.main {position: absolute; top: 100px;left:0; bottom: 100px;right: 0;overflow: auto;background-color: yellow;}
.content {height: 1000px;}

header 和footer 的css屬性基本同樣。
main的設置注意兩點：
1.用了同時設置top與bottom , left與right，撐開元素的技巧。
2.overflow:auto; 用來在內部元素超出時顯示進度條。
這樣在頁面高度變化，或者內部的content高度變化時，都始終能夠保持正常的三行佈局。

方法2、flex （三行高度自適應 + 兩列寬度自適應）

能夠直接看 jsfiddle栗子

主要代碼：

//html
<div class="header">header</div>
<div class="body">
  <div class="side">side</div>
  <div class="main">main</div>
</div>
<div class="footer">footer</div>

//css
body { display: flex; flex-flow: column;}
.heater, footer { height: 100px; }
div.body { flex: 1; display: flex; width: 500px; align-self: center; }
//div.body 既作三行flex佈局的item，也是兩列flex佈局的container
.side { width: 200px; }
.main { flex: 1; } // 實際上是flex-grow: 1; 佔滿剩餘寬度的1/n，而這裏的n就是1

能夠看到咱們的div.body仍是水平居中的，實際上是咱們給.body設置了一個定寬 width: 500px; 加上本元素交叉軸上的對齊方式 align-self: center; 的做用。