HTML清除浮動(dòng)的其中兩種方式
我要評(píng)論一、清除浮動(dòng)的方式一
給前面一個(gè)父元素設(shè)置高度，注意：企業(yè)開發(fā)中能不寫高度就不寫高度
<!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ì)把大盒子撐起來，但是兩個(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屬性失效了，不失效的方式我們下次再說。
三、源碼：
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ì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
html浮動(dòng)提示框功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了html浮動(dòng)提示框功能的實(shí)現(xiàn)代碼,需要的朋友可以參考下2019-11-05
html/css中float浮動(dòng)的用法實(shí)例詳解
這篇文章主要介紹了html/css中float浮動(dòng)的用法實(shí)例詳解,需要的朋友可以參考下2019-09-10html+css 清除浮動(dòng)的相關(guān)技巧心得
下面小編就為大家?guī)硪黄猦tml+css 清除浮動(dòng)的相關(guān)技巧心得。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，給大家一個(gè)參考2016-03-17Html+CSS浮動(dòng)的廣告條實(shí)現(xiàn)分解
廣告條想必大家并不陌生吧，在本文將為大家詳細(xì)介紹下如何使用Html+CSS實(shí)現(xiàn)浮動(dòng)的廣告條，感興趣的朋友可以參考下2013-10-08
