CSS クリアフローティングコード例 Demonstration_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS クリアフローティングコード例 Demonstration_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:29 AM

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/

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。