2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

<ul><li>菜單一</li><li>菜單二</li><li>菜單三</li><li>菜單四</li> </ul> <p>a,b,c,b.e,e,g,h,i</p>

>>>>如果讓上面的列表成為web頁(yè)面上水平排列的導(dǎo)航菜單，那么，需要使用CSS各種處理，其中包括IE5.5~IE10的hack處理。

在目前主流瀏覽器中 google使用了KHTML+WebKit為內(nèi)核的瀏覽器，火狐使用自己的，其他非IE陣營(yíng)基本都使用了WebKit內(nèi)核。使用了webKit內(nèi)核和火狐內(nèi)核，這類瀏覽器的渲染能力非常優(yōu)秀，兼容性很強(qiáng)，因此有時(shí)候你根本感覺(jué)不到自己在犯錯(cuò)。

1.在IE瀏覽器中，如果要實(shí)現(xiàn)上述導(dǎo)航菜單，必須要給ul設(shè)置【固定寬度】，而其他的瀏覽器不需要，為了兼容性，其他瀏覽器不得不遵守這一CSS規(guī)則（沒(méi)辦法，IE滿天飛的時(shí)代啊）。

2.li是塊級(jí)元素，所以默認(rèn)顯示在同一行，因此得為li設(shè)置[width]和[float];

3.設(shè)置完后，問(wèn)題出現(xiàn)了(當(dāng)然挖掘機(jī)問(wèn)題這里不做解答)。這里的問(wèn)題是 整個(gè) p標(biāo)簽內(nèi)的內(nèi)容重疊到 li下面了。這就是傳說(shuō)中的內(nèi)容溢出現(xiàn)象之一。

4.解決方案，方案一(當(dāng)然不是設(shè)置 p的margin-top，也建議別抱有這種想法)，給p標(biāo)簽設(shè)置css屬性 clear:both;,這是一種 方案，但這種方案只是將問(wèn)題隱藏了，問(wèn)題仍然存在。

5.你可以給ul設(shè)置background-color,你會(huì)發(fā)現(xiàn)，ul幾乎沒(méi)有高度，只有寬度，是不是高度問(wèn)題，為ul設(shè)置高度，但想過(guò)沒(méi)有，這種方式過(guò)于死板。

6.最佳方式，給 ul設(shè)置 overflow:hidden;并給p設(shè)置clear:both; 看這個(gè)單詞overflow(溢出)，很顯然他的職責(zé)所在。

轉(zhuǎn)載于:https://my.oschina.net/ososchina/blog/337947

總結(jié)

以上是生活随笔為你收集整理的web页面 float定位导致“溢出现象”处理的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。