web頁面 float定位致使「溢出現象」處理

<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爲內核的瀏覽器，火狐使用本身的，其餘非IE陣營基本都使用了WebKit內核。使用了webKit內核和火狐內核，這類瀏覽器的渲染能力很是優秀，兼容性很強，所以有時候你根本感受不到本身在犯錯。

1.在IE瀏覽器中，若是要實現上述導航菜單，必需要給ul設置【固定寬度】，而其餘的瀏覽器不須要，爲了兼容性，其餘瀏覽器不得不遵照這一CSS規則（沒辦法，IE滿天飛的時代啊）。

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

3.設置完後，問題出現了(固然挖掘機問題這裏不作解答)。這裏的問題是 整個 p標籤內的內容重疊到 li下面了。這就是傳說中的內容溢出現象之一。

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

5.你能夠給ul設置background-color,你會發現，ul幾乎沒有高度，只有寬度，是否是高度問題，爲ul設置高度，但想過沒有，這種方式過於死板。

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