block一般一個塊佔一行，除非float
inline是自動排為一行，就象段內的文字一樣，可成為多行。

clear:both
語法：clear : none | left |right | both 
none : 　允許兩邊都可以有浮動物件
both : 　不允許有浮動物件
left : 　不允許左邊有浮動物件
right : 　不允許右邊有浮動物件
說明：該屬性的值指出了不允許有浮動物件的邊。請參閱float屬性。

!important 具有優先權,提升指定樣式規則的應用優先權。
示例：div { color:red!important }

display:inline|block
display:inline比較經典的用法是用在 <ul> 下的 <li> 中
display:inline 對應不顯示為 display:none
display:block 對應不顯示為 hidden
 說通俗點樣式為none的元素不佔位置,而樣式為hidden的元素雖然不顯示但還是佔地方

1.傳統處理方式：   
li {float:left;}/*這樣，對固定寬度導航條來說，li不能自動居中*/

2.inline-block方式：
ul {text-align:center;font-family:simsun;font-size:14px;}
li {display:inline-block;*display:inline;zoom:1;margin-right:-0.5em;
 *margin-right:0;}
a{display:block;}
/*行內顯示並且水平居中；
display:inline;zoom:1;是對ie的hack,
margin-right:0.5em是對現代瀏覽器去縫
*/

瀏覽器FireFox,Chrome下，li之間有縫隙，Google得知縫隙由字型大小產生，所以另外加入hack來除縫
關於zoom:1;的作用，可以看下幫助文件，地址：http://www.yesky.com/imagesnew/software/css/css2/c_zoom.html
而這兩種實現方法中，float:left要比display:inline;的表現方式要好。因為內聯（display:inline;）

屬於行佈局，其特性是在一行裡進行佈局，所以不能被設定寬高。塊級元素的佈局相對於內聯樣式要精
確的多。所以儘量使用float:left;
當我們使用float:left後,發現父級元素的div沒有被撐開了. 通常情況下要清理浮動.這也是我們公司現在所使用的方法. 如

<div>
      <ul style="float:left">
           <li><a href="#">1</a></li>
           <li><a href="#">2</a></li>
           <li><a href="#">3</a></li>
      </ul>
       <!--需要清理浮動-->
       <div style="clear:both"></div>
</div>

 用了很久這樣的方法，每次寫Repeater繫結的時候都要加個<div style="clear:both"></div>的標籤,以
前沒有注意到這方面的東西.今天重新寫樣式的時候,就上網搜了下替代的方法.果然在Google中搜到了一
篇How To Clear Floats Without Structural Markup的文章,靈活的處理了清空浮動的問題
首先設定程式碼為:

.clearfix:after {
  content:".";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}
這樣我們只要對父級div引入這個clearfix的類即可,即

<div class="clearfix" >
      <ul style="float:left">
           <li><a href="#">1</a></li>
           <li><a href="#">2</a></li>
           <li><a href="#">3</a></li>
      </ul>
</div>

 這個css的原理是經過使用after偽物件,它將在應用clearfix的元素結尾新增content中的內容,也就是一
個".",並且把他設定為塊級元素(display="block");高度設定為0,clear="both",然後將其內容隱藏掉
(visibility="hidden").這樣就會撐開此塊級元素.
但是,IE並不支援.所以如果你需要相容IE瀏覽器的話,可以設定以個Hack.

 .clearfix:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
 
* html .clearfix {zoom:1;}
這樣我們就可以只在父級div引用class類解決了繁瑣的清空步驟.
下面給出別的網站清空浮動的程式碼:
/* 豆瓣的clear both方式 */
.clearfix:after {
content: “.”;
display:block;
height:0;
clear:both;
visibility:hidden
}
.clearfix {
zoom: 1;
display: inline-block;
_height: 1px
}
*html .clearfix { height: 1% }
*+html .clearfix { height: 1% }
.clearfix { display: block }

CSS hack 用來讓網頁相容各種瀏覽器(在各種環境下都能“正確的”顯示)
*+html 與 *html 是IE特有的標籤, firefox 暫不支援.而*+html又為IE7特有標籤.

/*蝦米的方式*/
.clearfix:after{
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}

直接copy下bootstrap裡面的clearfix寫法：
    .clearfix {
      *zoom: 1;
    }

    .clearfix:before, .clearfix:after {
      display: table;
      line-height: 0;
      content: "";
    }

.clearfix:after {
  clear: both;
}

.clearfix{zoom:1;}

在一個有float 屬性元素的外層增加一個擁有clearfix屬性的div包裹，可以保證外部div的height，即
清除"浮動元素脫離了文件流，包圍圖片和文字的 div 不佔據空間"的問題。
看到”閒聊CSS之關於clearfix–清除浮動“ （http://www.indievox.com/e2ghost/post/50238）的文章給
了一個比較清晰的分析：

構成Block Formatting Context的方法有下面幾種：
    float的值不為none。
    overflow的值不為visible。
    display的值為table-cell, table-caption, inline-block中的任何一個。
    position的值不為relative和static。
很明顯，float和position不合適我們的需求。那隻能從overflow或者display中選取一個。
因為是應用了.clearfix和.menu的選單極有可能是多級的，所以overflow: hidden或overflow: auto也不

滿足需求
（會把下拉的選單隱藏掉或者出滾動條），那麼只能從display下手。
我們可以將.clearfix的display值設為table-cell, table-caption, inline-block中的任何一個
但是display: inline-block會產生多餘空白，所以也排除掉。
剩下的只有table-cell, table-caption，為了保證相容可以用display: table來使.clearfix形成一個Block Formatting Context因為display: table會產生一些匿名盒子，這些匿名盒子的其中一個（display值為table-cell）會形成Block Formatting Context。這樣我們新的.clearfix就會閉合內部元素的浮動。

這就是為什麼選擇display:table的原因。

firefox不支援float:right

<button class="vjs-fullscreen-control vjs-control vjs-button" 
type="button" aria-live="polite" title="Fullscreen" 
aria-disabled="false"></button>
<div class="vjs-volume-menu-button vjs-menu-button 
vjs-menu-button-inline vjs-control vjs-button  
vjs-volume-menu-button-horizontal vjs-vol-3" 
title="Mute" aria-disabled="false"></div>

/********replace float:right********************/
.vjs-default-skin .vjs-volume-menu-button{
  position:absolute;
  right:0;
  top:0;
  margin-right: 4em;
}

.vjs-default-skin .vjs-fullscreen-control{
  position:absolute;
  right:0;
  top:0;
}

/*.vjs-default-skin .vjs-volume-menu-button{
  float:right;
  margin-right: 4em;
}

.vjs-default-skin .vjs-fullscreen-control{
  float:right;
}*/
/*******replace float:right*********************/