ホームページ > 記事 > ウェブフロントエンド > CSSでfloatをクリアする方法
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 スタイルをクリアからクリアフロートに追加します
注意: クリア スタイルのブロック レベル要素は、マージン属性を使用して追加できません。
レンダリング:
コード:
<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。 Inner Wall メソッド: 空のブロック レベル要素を使用して CSS スタイルを追加し、フロートをクリアします。
レンダリング:
コード:
<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. フローティング要素を追加します。親要素の Net
プログラミング入門列に overflow:hidden を追加します。
以上がCSSでfloatをクリアする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。