在上篇介绍通过设置祖先元素的高度类清除浮动，但在实际的网站开发中，很少会设置元素的高度，那这是为什么呢？
是因为元素一般都能被内容撑高，所以不需要设置高度。
那能不能不写height，也把浮动清除了呢？也让浮动之间，互不影响呢？
还是同样的例子，通过对div2设置clear: both;来清除浮动，clear就是清除的意思，both就是全部的意思，包括左浮动和右浮动。这里对li设置左浮动，是div2会紧追在div1后面，就需要对div2清除浮动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
float: left;
text-align: center;
background-color: red;
width: 90px;
height: 40px;
list-style: none;
margin-left: 10px;
}
/*第2个div设置clear：both*/
.div2{
clear: both;
margin-top: 10px;
}
</style>
</head>
<body>
<div>
<h3>清除浮动</h3>
<div class="div1">
<ul>
<li>html</li>
<li>css</li>
<li>js</li>
<li>jq</li>
</ul>
</div>
<div class="div2">
<ul>
<li>方法</li>
<li>态度</li>
<li>面试</li>
</ul>
</div>
</div>
</body>
</html>
运行结果：
由运行结果，我们可以看出div2清除了浮动，但是对div2设置的margin-top: 10px;失效了。同样对div1设置margin-bottom也是失效的，本质原因div没高。这也是使用clear属性清除浮动的一个弊端。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
