CSS使用伪类清除浮动
2016-11-07 本文已影响78人
圆梦人生
来源：http://itssh.cn/post/932.html
CSS清除浮动很多方式，可以使用:before和:after伪类来清除浮动，优点是不会增加页面dom元素，缺点是IE浏览器只支持IE8及其以上。
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>使用伪类清除浮动</title>
<!--
@author:SM
@e-mail: sm0210@qq.com
@home:www.sm0210.cn
@desc:使用伪类清除浮动
-->
<style type="text/css">
* {
padding: 0;
margin: 0;
}
ul,li {
list-style: none;
margin: 0;
padding: 0;
}
#box {
width: 500px;
border:1px solid red;
margin:0 auto;
}
#menu {
border: 1px solid yellow;
}
#menu li {
float: left;
/*width: 25%;*/
}
/*
伪类清除浮动
ps: 对于ie浏览器支持IE8及其以上
*/
.clearfix:before,
.clearfix:after
{
display: table;
content: " ";
}
.clearfix:after
{
clear: both;
}
</style>
</head>
<body>
<!---->
<div id="box">
<div id="menu" class="clearfix">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div>浮动后内容区域....</div>
</div>
<!---->
</body>
</html>
