清除浮动的5种方式

      在CSS的开发中，之前对于清除浮动这块总感觉迷惑，为什么要清除浮动？清除浮动的方式又有那些？

      如下面一段HTML代码：

<ol>
		<li>
			<h2>运用CSS3的-webkit-box属性实现导航条效果</h2>
			<ul class="navone">
		        <li><a href="javascript:void(0)">Home</a></li>
		        <li><a href="javascript:void(0)">About</a></li>
		        <li><a href="javascript:void(0)">Content</a></li>
	        </ul>
		</li>
		<li>
			<h2>用overflow:hidden来实现浮动清除</h2>
	        <ul class="navtwo">
		        <li><a href="javascript:void(0)">Home</a></li>
		        <li><a href="javascript:void(0)">News</a></li>
		        <li><a href="javascript:void(0)">Photos</a></li>
	        </ul>
		</li>
		<li>
			<h2>用伪类清除浮动</h2>
	        <ul class="navthree">
		        <li><a href="javascript:void(0)">Home</a></li>
		        <li><a href="javascript:void(0)">About</a></li>
		        <li><a href="javascript:void(0)">Content</a></li>
	        </ul>
		</li>
		<li>
			<h2>添加额外的元素来清除浮动</h2>
	        <ul class="navfour">
		        <li><a href="javascript:void(0)">Home</a></li>
		        <li><a href="javascript:void(0)">About</a></li>
				<li><a href="javascript:void(0)">Content</a></li>
				<span class="clearfix"></span>
			</ul>
		</li>
		<li>
			<h2>使父元素浮动</h2>
			<ul class="navfive">
				<li><a href="javascript:void(0)">Home</a></li>
				<li><a href="javascript:void(0)">About</a></li>
				<li><a href="javascript:void(0)">Content</a></li>
			</ul>
		</li>
	</ol>

     在上面一段代码中，我们需要对li元素进行浮动处理，以创建导航条。当对li元素应用float:left;时，它们就会脱离正常的文档流，跳出父块也就是ul元素的包围。如，对父元素ul应用了一个边框，但是子元素li跳出了ul的包围，就不会得到预期的效果。

      我写的一段CSS代码如下，通过5种方式可以清楚浮动，当然也有最佳的选择：

	ul{margin: 0;padding: 0;}
	ul li{margin: 0;padding: 0;list-style:none;}
	a{text-decoration: none;}

	/* 运用CSS3的-webkit-box属性实现导航条效果 */
	ul.navone{display:-webkit-box;width: 15em;border: 1px dashed #000;}
	ul.navone li{-webkit-flex:1;-webkit-box-sizing:border-box;width:5em;border-right: 1px solid #000;}
	ul.navone li:last-child{border: none;}
	ul.navone li a{display: block;text-align: center;}

    /* 用overflow:hidden来实现浮动清除 */
	ul.navtwo{width: 15em;border: 1px dashed #000;overflow: hidden;}
	ul.navtwo li{width: 5em;float: left;box-shadow: 1px 0 0 #000;}
	ul.navtwo li a{display: block;text-align: center;}

	/* 用伪类清除浮动 */
	ul.navthree{width: 15em;border: 1px dashed #000;}
	ul.navthree:after{content: ".";height: 0;overflow: hidden;display: block;clear: both;}
	ul.navthree li{width: 5em;float: left;box-shadow: 1px 0 0 #000;}
	ul.navthree li a{display: block;text-align: center;}

    /* 添加额外的元素来清除浮动 */
    ul.navfour{width: 15em;border: 1px dashed #000;}
    ul.navfour li{width: 5em;float: left;box-shadow: 1px 0 0 #000;}
    ul.navfour li a{display: block;text-align: center;}
    ul.navfour .clearfix{display:block;width:100%;clear: both;}

    /* 使父元素浮动 */
    ul.navfive{width: 15em;border: 1px dashed #000;float: left;}
    ul.navfive li{width: 5em;float: left;box-shadow: 1px 0 0 #000;}
    ul.navfive li a{display: block;text-align: center;}

      以上5种方式为常用的清楚浮动的方式，随着CSS3的普及，手机端完全可以依靠第一种方式就能实现（当然在使用CSS3相关属性时，要加上前缀，如display:-webkit-box;就要加上-webkit前缀），也就是不用浮动，自然也不用清除浮动。但是，对于桌面浏览器，则还需要运用第二种方式来清除浮动。

      最终的效果如下：