float：

float:left | right | none | inherit

1、塊在一行顯示

2、內(nèi)嵌支持寬高

3、默認(rèn)內(nèi)容撐開寬度

4、脫離文文檔流

5、提升層級半層

-------------------------------------文檔流--------------------------------

文檔流是文檔中可顯示對象在排列時(shí)所占用的位置。

浮動的定義：使元素脫離文檔流，按照指定方向發(fā)生移動，遇到父級邊界或者相鄰的浮動元素停了下來。

clear:left | right | both | none | inherit；元素的某個(gè)方向上不能有浮動元素

clear:both;在左右兩側(cè)均不允許浮動元素

-------------------------------------清除浮動方法---------------------------

1、加高（擴(kuò)展性不好）

2、父級浮動（margin左右會消失，頁面所有元素都得加浮動）

3、inline-block（margin左右會消失）

4、空標(biāo)簽（ie6最小高度19px）height：0；font-size:0（overflow：hidden）;

5、overflow：hidden（需要配合寬度或zoom兼容ie6和ie7）

6、br（結(jié)構(gòu)，樣式，行為分離）

7、after偽類

-------------------------------------浮動兼容性問題--------------------------

IE6雙邊距BUG（IE6下塊屬性標(biāo)簽浮動，并且有橫向margin，橫向margin加倍。）

1、IE6

2、塊元素（加display：inline-block）

3、浮動

4、橫向margin

IE6下 li部分兼容性問題：

a、左右兩列布局，右邊右浮動IE6 IE7下折行；(左邊元素浮動)

b、IE6 IE7li下元素都浮動 在IE6 IE7下 li 下方會產(chǎn)生3px間隙問題；（加vertical-align:top；）

vertical-align 垂直對齊方式

a、加垂直對齊方式的同排元素都要加垂直對齊方式；

b、垂直對齊方式可以解決元素下方間隙問題；

圖片下方間隙問題

a、display:block; (改變標(biāo)簽本身特性)

b、overflow:hidden; (必須知道圖片高度)

d、vertical-align (暫時(shí)最完美的方案)