float_html/css_WEB-ITnose についてのある程度の理解-htmlチュートリアル-php.cn

float_html/css_WEB-ITnose についてのある程度の理解

WBOY

リリース： 2016-06-24 11:38:17

オリジナル

1069 人が閲覧しました

初めてブログを書くので、何を書いていいか分からず、稚拙な文章で申し訳ありません。

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

参照のみ。