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(溢出)，很显然他的职责所在。