刚学习css的朋友一定会遇到浮动问题时头痛不已,今天minerchow就用最简单的例子教大家清除浮动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0;padding:0;}
ul{ border:1px solid #ccc;}
ul li{ float:left; width:100px; margin-left:20px; background:#F00;}
</style>
</head>
<body>
<ul>
<li><p>aaaaaa</p></li>
<li><p>bbbbbb</p><p>bbbbbb</p></li>
<li><p>bbbbbb</p></li>
<li><p>bbbbbb</p></li>
</ul>
</body>
</html>
我最早学习css时遇到浮动问题会在外层添加<div style="clear:both"></div>,但对不是固定高度li清除会无效,例如本例.
经过一两个项目实践后,发现只要在ul添加overflow:hidden;zoom:1;就能完美解决
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0;padding:0;}
ul{ border:1px solid #ccc; overflow:hidden;zoom:1;}
ul li{ float:left; width:100px; margin-left:20px; background:#F00;}
</style>
</head>
<body>
<ul>
<li><p>aaaaaa</p></li>
<li><p>bbbbbb</p><p>bbbbbb</p></li>
<li><p>bbbbbb</p></li>
<li><p>bbbbbb</p></li>
</ul>
</body>
</html>
另外,一种流行方法是给ul定义一个clearfix,然后样式表添加
.clearfix {zoom:1}
.clearfix:after {
content: '\20';
display: block;
clear: both;
}
不过个人还是推荐第一种方法,因为不需要额外添加ul的class,因为有时后台添加循环标签时不希望ul定义额外的样式
转载请注明来自:multifeeling.com
