一般我們在寫css樣式時(shí)，經(jīng)常會用到display:inline-block 和float:left，那這兩個(gè)樣式都可以讓元素橫向排列，那什么時(shí)候用float:left，什么時(shí)候用display:inline-block呢？

float: 浮動(dòng)，聞其名而知其意：使元素浮起來，脫離文檔流，從而達(dá)到多個(gè)元素排列在一行的目的。

inline-block:內(nèi)聯(lián)塊，即既有內(nèi)嵌的部分特征也具有塊級元素的特征。

使用浮動(dòng)：1、讓元素環(huán)繞某一個(gè)元素，對一個(gè)元素跟圍繞他的一些元素進(jìn)行更多控制

2、不想處理inline-block帶來的空白問題

元素浮動(dòng)后，它會變?yōu)?inline-block。其寬度不是100%

#columnContent .item_ul>li

{

float:left;

width:203px;

margin:3px 5px;

vertical-align:top;

text-align:left;

}

效果：菜單居中和自適應(yīng)

問題：整體樣式?jīng)]問題，但是展開li標(biāo)簽內(nèi)容時(shí)，其他li標(biāo)簽環(huán)繞，

又因?yàn)榇嬖谧赃m應(yīng)，當(dāng)頁面縮小時(shí)，每行的li標(biāo)簽個(gè)數(shù)會減少，并且居中

#columnContent .item_ul>li

{

display:inline-block;

width:203px;

margin:3px 5px;

vertical-align:top;

text-align:left;

*display:inline;

zoom:1; }

只需替換一個(gè)浮動(dòng)樣式就都解決了。