ホームページ >ウェブフロントエンド >htmlチュートリアル >float_html/css_WEB-ITnose についてのある程度の理解
float_html/css_WEB-ITnose についてのある程度の理解
- WBOYオリジナル
- 2016-06-24 11:38:171068ブラウズ
初めてブログを書くので、何を書いていいか分からず、稚拙な文章で申し訳ありません。
CSS フローティングについて学びました。いわゆるフローティングとは、float 属性を使用した後、通常のドキュメント フローからフローティング要素を分離することを意味します。 div これはブロックレベルの要素であり、排他的な行を占有します。floating を使用して div を並べて配置しない場合は、配置のみを使用できます (今のところは言うまでもありません)。
div要素を並べて表示するには、floating属性を使用する必要があります。divは1行を占めるブロックレベルの要素であるため、floatingを使用しない場合、通常は図のように通常のフローの順序で配置されます。以下の図で:
div1、div2、div3を並べて表示したい場合は、floatを使用する必要があります。 ただし、div1をfloatにすると、次のようになります。なぜなら、div1がfloatになった後です。これは通常の配置とレイアウトの方法から外れているため、div2 はデフォルトで上に移動し、その前に要素がないため div1 の位置を占めます。div1 はフローティングであるため、div2 の一部だけが移動できます。が表示され、残りは浮動 div1 によってカバーされます。
3つのdivを並べて表示するには、floatを使用するだけで済みますが、floatを使用すると、その後のレイアウト要素に影響が生じます。ここでは、主にfloatingの影響をクリアするいくつかの方法を紹介します。
方法1：clear属性を使用します。
<head> .clear{ clear:both;}</head><body> <div class=“clear”></div></body> それは、浮動要素の直後に空の div を追加することを意味します。
方法２：親要素にoverflow属性を追加します。
<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #warp { width: 300px; height:300px; border:1px solid red; overflow: hidden; } .inner1{ width:100px; height:100px; background-color:blue; float:right; } .inner2{ width:100px; height:100px; background-color:yellow; } </style></head><body><div id="warp"> <div class="inner1">1</div> <div class="inner2">2</div></div></body> 親要素にoverflow属性を追加することでフローティングの効果を解除できます。
方法３：前後の疑似オブジェクトを通して。
.clearFix:after{ clear:both; display:block; visibility:hidden; height:0; line-height:0; content:"."; }<div class="clearFix"></div> この方法はオンラインでよく使用されます。
以上がfloatの影響をクリアする方法について私が知っていることです。 要約に不備があるかもしれませんが、所詮は初心者ですので、ご理解いただけると幸いです。
これは、w3school からのフローティングに関する説明です: http://www.w3school.com.cn/css/css_positioning_floating.asp
参照のみ。