這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)怎樣使用float與inline-block，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

堅(jiān)守“ 做人真誠(chéng) · 做事靠譜 · 口碑至上 · 高效敬業(yè) ”的價(jià)值觀，專業(yè)網(wǎng)站建設(shè)服務(wù)10余年為成都成都活動(dòng)板房小微創(chuàng)業(yè)公司專業(yè)提供成都企業(yè)網(wǎng)站定制營(yíng)銷網(wǎng)站建設(shè)商城網(wǎng)站建設(shè)手機(jī)網(wǎng)站建設(shè)小程序網(wǎng)站建設(shè)網(wǎng)站改版，從內(nèi)容策劃、視覺(jué)設(shè)計(jì)、底層架構(gòu)、網(wǎng)頁(yè)布局、功能開(kāi)發(fā)迭代于一體的高端網(wǎng)站建設(shè)服務(wù)。

首先是兼容性

float的話完全不用擔(dān)心什么瀏覽器都能兼容,比較是一個(gè)很老的屬性了.

inline-block則在IE8以上(包括8)才能使用,查了下資料,其實(shí)IE5.5的時(shí)候就已經(jīng)有inline-block了,只是實(shí)現(xiàn)不一樣,所以想要兼容低版本的IE就只能用額外的代碼

代碼如下:

display:inline;  //強(qiáng)行不換行
zoom:1;          //  用來(lái)觸發(fā)hasLayout,有興趣深入理解的猴子可自行了解

其次是對(duì)父親元素的影響

inline-block的話,沒(méi)什么好說(shuō)的,唯一要注意的就是每個(gè)設(shè)置了inline-block的元素直接都會(huì)有空隙,可以在父親元素里設(shè)置

代碼如下:

font-size: 0;

來(lái)消除,不過(guò)后果是什么大家都知道,不過(guò)我依然覺(jué)得這是最簡(jiǎn)單暴力的方法,當(dāng)然也有其他方法,還是請(qǐng)自行查找

float的話,設(shè)置了該屬性的元素會(huì)脫離文本流,也就是說(shuō)和position:absolute一樣,不過(guò)對(duì)于一樣設(shè)置了該屬性的元素則不會(huì).所以帶來(lái)的問(wèn)題就是父親元素并不會(huì)隨著子元素的大小改變長(zhǎng)寬,但是如果父親元素設(shè)置為inline-block的話,則長(zhǎng)寬會(huì)隨著子元素變化(前提是瀏覽器兼容inline-block,如果兼容的話我就直接用inline-block了~).

所以在不給父親元素設(shè)置inline-block屬性的時(shí)候就需要清除浮動(dòng).

在父親元素結(jié)束前最后一個(gè)浮動(dòng)元素后.clear:both下(原理大概就是用一個(gè)有文本流的元素定位父親元素的大小),這樣父親元素的高度就會(huì)隨浮動(dòng)元素改變

最后是一點(diǎn)其他的小區(qū)別

基線:float和inline-block的基線不一樣

float的基線是浮動(dòng)元素緊貼頂部

inline-block的基線是默認(rèn)的基線,所以比較靈活可以配合vertical-align.

上述就是小編為大家分享的怎樣使用float與inline-block了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文名稱：怎樣使用float與inline-block
瀏覽路徑：http://chinadenli.net/article28/ppggcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、服務(wù)器托管、全網(wǎng)營(yíng)銷推廣、品牌網(wǎng)站設(shè)計(jì)、電子商務(wù)、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)