2019獨角獸企業(yè)重金招聘Python工程師標準>>>

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

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

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

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

2.li是塊級元素，所以默認顯示在同一行，因此得為li設置[width]和[float];

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

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

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

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

轉載于:https://my.oschina.net/ososchina/blog/337947

總結

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

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