css全般小メモ02?? フローティング、クリア（3つの例）_html/css

css全般小メモ02?? フローティング、クリア（3つの例）_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:02:05

オリジナル

1082 人が閲覧しました

フローティングとクリアは通常 CSS で使用されますが、これも習得する必要がある知識ポイントです。その使用法を説明するためにいくつかの例を示します。 1. テキストの折り返し効果 2. 複数。 div を並べて表示します 3. フローティングをクリアします (デフォルトの表示)

一. テキストの折り返し効果:

html コードは次のとおりです:

 1 <body> 2     3      <style type="text/css"> 4        #big img {float: left;padding: 10px;border: 1px solid red;} 5        #big span {font-size: 24px;font-weight: bold; margin: 0 auto;} 6      </style> 7      <div id="big"> 8         <span>广告浮动效果:</span> 9          <p><img src="..\Desktop\p6.jpg" width="200" alt="p6" />文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>10      </div>11 12   </body>

ログイン後にコピー

説明: img タグを左に直接フローティングします。そして、テキストで囲まれた画像が表示されます。padding: 10px; の効果は、画像とテキストの間の距離を設定することです。実行中の効果は次のとおりです (画像パスを自分で変更することを忘れないでください)。

2. 複数の div が並べて表示されます

HTML コードは次のとおりです:

 1 <body> 2     3      <style type="text/css"> 4         #big div {width: 100px;height: 100px;} 5         .div1 {background: red;} 6         .div2 {background: yellow;} 7         .div3 {background: green;} 8      </style> 9      <div id="big">10         <div class="div1">div1</div>11         <div class="div2">div2</div>12         <div class="div3">div3</div>13      </div>14 15   </body>

ログイン後にコピー

上記のコードは次のように表示されます:

写真からわかるように、3 つの div横に並べて表示するのではなく、縦に表示するのがデフォルトの表示方法です。並べて表示したい場合は、上記のコードに

#big div {width: 100px; height: 100px; float: left;} という文を追加するだけで、表示効果は次のようになります。

3. float をクリアします

次の HTML コードがあります:

 1  <body> 2     3      <style type="text/css"> 4         #big div {width: 100px;height: 100px;} 5         .div1 {background: red;float: left;}//注意这里的第一个div是左浮动； 6         .div2 {background: yellow;} 7         .div3 {background: green;} 8      </style> 9      <div id="big">10         <div class="div1">div1</div>11         <div class="div2">div2</div>12         <div class="div3">div3</div>13      </div>14 15   </body>

ログイン後にコピー

2 番目の例から、float: left が div2 と div3 の両方に設定されている場合、3 つの div は次のようになります。並べて表示されます。上記のコードに注目してください。最初の div はフローティングのままですが、次の 2 つの div はフローティングになっていません。これはどのような効果ですか?下の図に示すように:

図からわかるように、div2 がありません。これはなぜですか? div1 が float left に設定されているため、デフォルトでは div2 が最初の位置から表示されるため、div1 が div2 を覆い、div3 が div2 から表示し続けるので、この結果になります。では、デフォルトの表示に戻すにはどうすればよいでしょうか。これには、フロートをクリアしてコード .div2 {background: yellow;clear:left;} を変更する必要がありますが、問題ありません。効果は次のとおりです:

div2 が再び表示されます。これは、float をクリアする関数です。名前が示すように、それが何を意味するかはすでにわかっています。それ以上は言わないでください。

以上が 3 つの例です。皆さんのお役に立てば幸いです。ご質問がございましたら、お気軽にご相談ください。