abstrakt：本節(jié)課程測試中蒙圈了，ul中使用了overflow: hidden;屬性不用加claer屬性，也可以清除浮動，不明白這兩個有啥區(qū)別？以下是作業(yè)中進行了不同的測試結(jié)果。第一個加了overflow: hidden;屬性，沒加claer的結(jié)果：<!DOCTYPE html><html lang="en"><head><meta charset
本節(jié)課程測試中蒙圈了，ul中使用了overflow: hidden;屬性不用加claer屬性，也可以清除浮動，不明白這兩個有啥區(qū)別？
以下是作業(yè)中進行了不同的測試結(jié)果。
第一個加了overflow: hidden;屬性，沒加claer的結(jié)果：
<!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>關(guān)于我們</li>
<li>產(chǎn)品中心</li>
<li>企業(yè)招聘</li>
<li>聯(lián)系我們</li>
</ul>
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
</div>
</body>
</html>
第二個是使用了老師講的方法，展現(xiàn)結(jié)果卻一樣！
<!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>關(guān)于我們</li>
<li>產(chǎn)品中心</li>
<li>企業(yè)招聘</li>
<li>聯(lián)系我們</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>
Korrigierender Lehrer：滅絕師太Korrekturzeit：2019-01-18 18:08:20
Zusammenfassung des Lehrers：給了固定高度的父元素，可以不去清除浮動，但是父級元素的高度是有內(nèi)部div撐開的話，就必須清除浮動；關(guān)于overflow有時會出現(xiàn)兼容問題，當(dāng)然也可以清除浮動的