網頁布局中經常會用到float浮動，但是浮動的塊級元素脫離了標準文檔流，使得浮動元素的父元素沒有高度，導致父級元素沒有高度，所以需要清除浮動對父級元素的影響，本文介紹清除浮動的幾種方法。
清除浮動影響的幾種方法: 給父級元素設置高度
效果圖：
代碼：
<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樣式 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>內墻法 ：使用一個空白塊級元素上添加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>內墻法 相對于 外墻法 有相對優點：
內墻法 設置后，浮動元素的父級元素會被撐開，也就是說有了高度
給浮動元素的父元素添加 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>總結
以上所述是小編給大家介紹的Css實現清除浮動的方法匯總,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
