ホームページ > 記事 > ウェブフロントエンド > CSS クリア フローティング コード例 Demonstration_html/css_WEB-ITnose
CSS クリア フローティング コード例 Demonstration_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:29:181197ブラウズ
css クリア float コード例のデモンストレーション:
ページで float が使用されている場合、float をクリアする必要があります。そうしないと、予期しない結果が生じる可能性があります。
フロートのフローティングまたはクリアの原理については紹介しません。フロートをクリアするためのコードをいくつか紹介するだけです。フロートのフローティングまたはクリアに関する関連コンテンツについては、関連する資料を参照してください。 。
1. overflow を使用して float をクリアします:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">*{ margin:0px; padding:0px;}#box{ list-style:none; width:150px; overflow:hidden; border:1px solid red; margin:50px;}#box li{float:left;}</style></head><body><ul id="box"> <li>蚂蚁部落一</li> <li>蚂蚁部落二</li> <li>蚂蚁部落三</li> <li>蚂蚁部落四</li></ul></body></html> float をクリアするには、親要素に overflow:hidden を追加します。
2. フローティング要素の後に空のラベルを追加します:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">*{ margin:0px; padding:0px;}#box{ list-style:none; width:150px; overflow:hidden; border:1px solid red; margin:50px;}#box li{float:left;}.clear{clear:both}</style></head><body><ul id="box"> <li>蚂蚁部落一</li> <li>蚂蚁部落二</li> <li>蚂蚁部落三</li> <li>蚂蚁部落四</li> <div class="clear"></div></ul></body></html> 3. 主要な Web サイトで最も推奨されている方法:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> .parent{border:2px solid green;} .clearfix{*zoom:1;} .clearfix:after{ content:"."; display:block; height:0; visibility:hidden; clear:both; } .children{ width:100px; height:100px; background-color:red; float:left; } .right{ width:100px; height:100px; background-color:blue; float:right } </style> </head> <body> <div class="parent clearfix"> <div class="children"></div> <div class="right"></div> </div> </body> </html> ここでは、フローティング要素をクリアするいくつかの方法を紹介します。詳細 詳細については、関連資料を参照してください。
関連資料:
1.BFC ブロックレベルの書式設定コンテキスト。CSS の BFC ブロックレベルの書式設定コンテキストの詳細な説明を参照してください。
2. float をクリアするには、CSS での float のクリアの詳細な説明を参照してください。
元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=14243
詳細については、以下を参照してください: http://www.softwhy.com/divcss/