摘要：本节课程测试中蒙圈了，ul中使用了overflow: hidden;属性不用加claer属性，也可以清除浮动，不明白这两个有啥区别？以下是作业中进行了不同的测试结果。第一个加了overflow: hidden;属性，没加claer的结果：<!DOCTYPE html><html lang="en"><head><meta charset
本节课程测试中蒙圈了，ul中使用了overflow: hidden;属性不用加claer属性，也可以清除浮动，不明白这两个有啥区别？
以下是作业中进行了不同的测试结果。
第一个加了overflow: hidden;属性，没加claer的结果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一种方式</title>
<style>
.one{
width: 800px;
height: 35px;
margin-right: 10px;
}
.one ul{
list-style: none;
padding: 0px;
margin: 0px;
overflow: hidden;
}
.one ul li{
width: 150px;
height: 35px;
float: left;
margin: 0px 1px;
text-align: center;
line-height: 35px;
background: #ccc
}
.two{
width: 100px;
height: 100px;
background:lawngreen;
margin: 3px;;
}
</style>
</head>
<body>
<div class="one">
<ul>
<li>首页</li>
<li>关于我们</li>
<li>产品中心</li>
<li>企业招聘</li>
<li>联系我们</li>
</ul>
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
</div>
</body>
</html>
第二个是使用了老师讲的方法，展现结果却一样！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第二种方式</title>
<style>
.one{
width: 800px;
height: 35px;
margin-right: 10px;
}
.one ul{
list-style: none;
padding: 0px;
margin: 0px;
}
.one ul li{
width: 150px;
height: 35px;
float: left;
margin: 0px 1px;
text-align: center;
line-height: 35px;
background: #ccc
}
.two{
width: 100px;
height: 100px;
background:lawngreen;
float: left;
margin: 3px;;
}
.claer{clear: both;}
</style>
</head>
<body>
<div class="one">
<ul>
<li>首页</li>
<li>关于我们</li>
<li>产品中心</li>
<li>企业招聘</li>
<li>联系我们</li>
</ul>
<div class="claer"></div>
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
</div>
</body>
</html>
批改老师：灭绝师太批改时间：2019-01-18 18:08:20
老师总结：给了固定高度的父元素，可以不去清除浮动，但是父级元素的高度是有内部div撑开的话，就必须清除浮动；关于overflow有时会出现兼容问题，当然也可以清除浮动的
