清除浮动的5种方式

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

      如下面一段HTML代码：

		

			
运用CSS3的-webkit-box属性实现导航条效果
			

		        
Home
		        
About
		        
Content
	        
		
		

			
用overflow:hidden来实现浮动清除
	        

		        
Home
		        
News
		        
Photos
	        
		
		

			
用伪类清除浮动
	        

		        
Home
		        
About
		        
Content
	        
		
		

			
添加额外的元素来清除浮动
	        

		        
Home
		        
About
				
Content
				
			
		
		

			
使父元素浮动
			

				
Home
				
About
				
Content
			
		
	

     在上面一段代码中，我们需要对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前缀），也就是不用浮动，自然也不用清除浮动。但是，对于桌面浏览器，则还需要运用第二种方式来清除浮动。

      最终的效果如下：