您好,登錄后才能下訂單哦!
css如何清除浮動(dòng)?為了讓大家更加了解css清除浮動(dòng)的方法,小編給大家總結(jié)了以下內(nèi)容,一起往下看吧。
1、給父級(jí)元素設(shè)置高度
效果圖:
代碼:
<style> * { padding: 0; margin: 0; } .header { height: 30px; line-height: 30px; background-color: #333; } .header a { color: #fff; text-decoration: none; } ul { float: right; } li { float: left; list-style: none; padding-right: 20px; } </style> <div class="header"> <ul> <li><a href="#">首頁(yè)</a></li> <li><a href="#">文章</a></li> <li><a href="#">問答</a></li> <li><a href="#">幫助</a></li> <li><a href="#">關(guān)于</a></li> </ul> </div>
2、外墻法 :使用一個(gè)空白塊級(jí)元素上添加css樣式 clear 清除浮動(dòng)
注意:添加了clear樣式的塊級(jí)元素添加不了 margin 外邊距屬性
效果圖:
代碼:
<style> * { padding: 0; margin: 0; } .header { /* background-color: #333; */ } .header a { /* color: #fff; */ text-decoration: none; } ul { float: right; } li { float: left; list-style: none; padding: 5px 20px; } .clearfix { height: 10px; background-color: red; clear: both; } .main { color: #fff; height: 100px; background-color: blue; } </style> <div class="header"> <ul> <li><a href="#">首頁(yè)</a></li> <li><a href="#">文章</a></li> <li><a href="#">問答</a></li> <li><a href="#">幫助</a></li> <li><a href="#">關(guān)于</a></li> </ul> </div> <div class="clearfix"></div> <div class="main">主要內(nèi)容</div>
3、內(nèi)墻法 :使用一個(gè)空白塊級(jí)元素上添加css樣式 clear 清除浮動(dòng)
效果圖:
代碼:
<style> * { padding: 0; margin: 0; } .header { background-color: #333; } .header a { color: #fff; text-decoration: none; } ul { float: right; } li { float: left; list-style: none; padding: 5px 20px; } .clearfix { clear: both; } </style> <div class="header"> <ul> <li><a href="#">首頁(yè)</a></li> <li><a href="#">文章</a></li> <li><a href="#">問答</a></li> <li><a href="#">幫助</a></li> <li><a href="#">關(guān)于</a></li> </ul> <div class="clearfix"></div> </div>
內(nèi)墻法 相對(duì)于 外墻法 有相對(duì)優(yōu)點(diǎn):
內(nèi)墻法 設(shè)置后,浮動(dòng)元素的父級(jí)元素會(huì)被撐開,也就是說有了高度
4、給浮動(dòng)元素的父元素添加 overflow:hidden
效果圖:
代碼:
<style> * { padding: 0; margin: 0; } .header { background-color: #333; overflow: hidden; } .header a { color: #fff; text-decoration: none; } ul { float: right; } li { float: left; list-style: none; padding: 5px 20px; } .main { color: #fff; height: 100px; background-color: blue; } </style> <div class="header"> <ul> <li><a href="#">首頁(yè)</a></li> <li><a href="#">文章</a></li> <li><a href="#">問答</a></li> <li><a href="#">幫助</a></li> <li><a href="#">關(guān)于</a></li> </ul> </div> <div class="main">主要內(nèi)容</div>
關(guān)于css清除浮動(dòng)的方法介紹就分享到這里了,當(dāng)然并不止以上和大家分析的辦法,不過小編可以保證其準(zhǔn)確性是絕對(duì)沒問題的。希望以上內(nèi)容可以對(duì)大家有一定的參考價(jià)值,可以學(xué)以致用。如果喜歡本篇文章,不妨把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。