CSS 用伪类 :after 选择器清除浮动

利用 :after 伪类来实现清除浮动

 

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

 

<style>

 

*{padding:0px;margin:0px;}

ul,li{list-style:none;}

.nav li{float:left;}

.test{height:100px;width:100px;background:orange;}

/* 重点是下面这代码 */

.nav:after{content:"";clear:both;height:0;display:block;}   

 

</style>

 

<body>

    

<div class="nav">

    <li>标签1</li>

    <li>标签2</li>

    <li>标签3</li>

    <li>标签4</li>

</div>

 

<div class="test"></div>

 

</body>

 

</html>

 

posted @ 2014-08-04 09:08  Zion0707  阅读(1115)  评论(0)    收藏  举报