CSS 使用overflow:hidden清除浮动

CSS 使用overflow:hidden清除浮动

　　今天做了一道网页换肤的练习，但发现了其中的两个小问题，详情如下：

<div id="outer">
	<ul id="skin">
		<li id="red" title="红色"></li>
		<li id="green" title="绿色"></li>
		<li id="blue" title="蓝色"></li>
	</ul>
	<ul id="nav">
			<!--
               	javascript: 是一个伪协议javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码，
               	而 javascript:;表示什么都不执行，这样点击<a>时就没有任何反应。
               -->
			<li><a href="javascript:;">新闻</a></li>
			<li><a href="javascript:;">娱乐</a></li>
			<li><a href="javascript:;">体育</a></li>
			<li><a href="javascript:;">电影</a></li>
			<li><a href="javascript:;">音乐</a></li>
			<li><a href="javascript:;">旅游</a></li>
	</ul>
</div>

　　在div里有两个ul，对它们的li分别都设置了float: left后发现：
　　1. 这两个ul中的li都脱离了文档流，跑到一行上去了
　　2. 为ul设置过黑色背景，但都消失了
　　于是我使用了br来换行，但发现原作者并没有这样做，这不由得让我产生了疑问。在反复查看源码后，我发现是overflow: hidden;在起作用，遂到网上一查发现，它并不只有隐藏溢出的功能，还有清除浮动和解除坍塌的功能。原理如下：
　　浮动的元素(两个ul中的li)脱离文档元素， 不占据空间，所以跑到了一行上。 不浮动的元素(ul,div)会直接无视掉这个元素。因为我们没有设置父ul的高度，父ul无视了自己的两个孩子，其高度变为0，所以父ul没有显现。 解决方法就是：
　　1. 如果只想换行，给ul添加overflow:hidden属性即可，清除浮动，恢复它原先占据的ul的位置
　　2. 为父ul添加overflow:hidden属性用以清除浮动，使得父ul显现

　　若想更细致的查看该属性的用法：详细链接