1、為父級元素設定高度
效果圖:
程式碼:
<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="#">首页</a></li> <li><a href="#">文章</a></li> <li><a href="#">问答</a></li> <li><a href="#">帮助</a></li> <li><a href="#">关于</a></li> </ul> </div>
(推薦教學:CSS入門教學)
2、外牆法:使用一個空白區塊級元素上新增css樣式clear 清除浮動
注意:新增了clear樣式的區塊級元素新增不了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="#">首页</a></li> <li><a href="#">文章</a></li> <li><a href="#">问答</a></li> <li><a href="#">帮助</a></li> <li><a href="#">关于</a></li> </ul> </div> <div class="clearfix"></div> <div class="main">主要内容</div>
3、內牆法:使用一個空白區塊級元素上新增css樣式clear 清除浮動
效果圖:
##程式碼:<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="#">首页</a></li> <li><a href="#">文章</a></li> <li><a href="#">问答</a></li> <li><a href="#">帮助</a></li> <li><a href="#">关于</a></li> </ul> <div class="clearfix"></div> </div>內牆法相對於外牆法有相對優點:內牆法設定後,浮動元素的父級元素會被撐開,也就是說有了高度4、給浮動元素的父元素新增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="#">首页</a></li> <li><a href="#">文章</a></li> <li><a href="#">问答</a></li> <li><a href="#">帮助</a></li> <li><a href="#">关于</a></li> </ul> </div> <div class="main">主要内容</div>更多程式設計相關內容,請追蹤php中文網
程式設計入門欄位!
以上是css如何清除浮動的詳細內容。更多資訊請關注PHP中文網其他相關文章!