一、清除浮動(dòng)的方式一
給前面一個(gè)父元素設(shè)置高度，注意：企業(yè)開(kāi)發(fā)中能不寫(xiě)高度就不寫(xiě)高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D131_ClearFloat</title>
<style>
.smallbox1{
width:100px;
height:100px;
background-color: red;
boder:3px solid black;
margin:5px;
float:right;
}
.smallbox2{
width:100px;
height:100px;
background-color: red;
boder:3px solid black;
margin:5px;
}
.smallbox3{
width:100px;
height:100px;
background-color: red;
boder:3px solid black;
margin:5px;
}
.smallbox4{
width:100px;
height:100px;
background-color: red;
boder:3px solid black;
margin:5px;
}
.smallbox5{
width:100px;
height:100px;
background-color: red;
boder:3px solid black;
margin:5px;
}
.smallbox6{
width:100px;
height:100px;
background-color: red;
boder:3px solid black;
margin:5px;
}
.bigbox1,.bigbox2{
/*width:400px;*/
/*width:400px;*/
background-color: green;
border:3px black solid;
}
</style>
</head>
<body>
<div class="bigbox1">
<div class="smallbox1"></div>
<div class="smallbox2"></div>
<div class="smallbox3"></div>
</div>
<div class="bigbox2">
<div class="smallbox4"></div>
<div class="smallbox5"></div>
<div class="smallbox6"></div>
</div>
</body>
</html>
二、清除浮動(dòng)的第二種方式
給后面的屬性添加clear屬性
clear屬性取值：
none：默認(rèn)取值，按照浮動(dòng)元素的排序規(guī)則進(jìn)行排序（左浮動(dòng)找左浮動(dòng)，右浮動(dòng)找右浮動(dòng)）
left：不要找前面的左浮動(dòng)元素
right：不要找前面的右浮動(dòng)元素
both：不要找前面的左浮動(dòng)和有浮動(dòng)元素
例如：我們不設(shè)置大盒子的寬高，小盒子會(huì)把大盒子撐起來(lái)，但是兩個(gè)大盒子會(huì)因此而在一行上
.smallbox1{
width:100px;
height: 100px;
float:left;
background-color: red;
border:2px solid black;
}
.smallbox2{
width:100px;
height: 100px;
float:left;
background-color: red;
border:2px solid black;
}
.smallbox3{
width:100px;
height: 100px;
float:left;
background-color:blue;
border:2px solid black;
}
.smallbox4{
width:100px;
height: 100px;
float:left;
background-color: blue;
border:2px solid black;
}
</style>
</head>
<body>
<div class="bigbox1">
<div class="smallbox1"></div>
<div class="smallbox2"></div>
</div>
<div class="bigbox2">
<div class="smallbox3"></div>
<div class="smallbox4"></div>
</div>
</body>
我們使用clear屬性在第三個(gè)小盒子上，這樣就可以另起一行了（第四個(gè)就不用，因?yàn)槲覀兙拖胱尩谌齻€(gè)挨著第四個(gè)），只需要第三個(gè)小盒子的代碼修改代碼
.smallbox3{
clear:left;
width:100px;
height: 100px;
float:left;
background-color:blue;
border:2px solid black;
}
注意點(diǎn)：margin屬性失效了，不失效的方式我們下次再說(shuō)。
三、源碼：
D131_ClearFloat.html
D132_CLearAttribute.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D131_ClearFloat.html
https://github.com/ruigege66/HTML_learning/blob/master/D132_CLearAttribute.html
總結(jié)
以上所述是小編給大家介紹的HTML清除浮動(dòng)的其中兩種方式，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
