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

      最终的效果如下：





大小: 16.8 KB

查看图片附件