CSSのfloat属性とposition:absoluteの違いについて。 _html/css_WEB-ITnose

1.float 属性は、要素が浮動する方向を定義します。歴史的に、このプロパティは常に画像に適用され、テキストが画像の周りを回り込むようにしていましたが、CSS では任意の要素をフローティングにすることができます。フロート要素は、要素のタイプに関係なく、ブロック レベルのボックスを作成します。 div は、それ自体で 1 行を占める典型的なブロックレベル要素です。

まず、最も基本的なブロックレベルの要素がどのように配置されているかを見てみましょう。 html コードでは、次のスタイルはこれに基づいています。

<div class="boxBg">        <div class="box1">        框框1        </div>        <div class="box2">        框框2        </div>        <div class="box3">        框框3        </div></div>

CSSコード:

.boxBg{    margin: 0 auto;    width:500px;    height:200px;    border:2px solid #ccc    }    .box1{    width:100px;    height:50px;    background-color:red    }    .box2{    width:100px;    height:50px;    background-color:blue    }    .box3{    width:100px;    height:50px;    background-color:green    }

実行結果:

divはブロックレベルの要素なので、ボックスは縦に配置されます。実際の運用では、フレームを水平に配置する必要があることがよくあります。これを行うには 2 つの方法があります。一つ目は、display:inlin-block;

.boxBg{    margin: 0 auto;    width:500px;    height:200px;    border:2px solid #ccc    }    .box1{    width:100px;    height:50px;    background-color:red;    display:inline-block    }    .box2{    width:100px;    height:50px;    background-color:blue;    display:inline-block    }    .box3{    width:100px;    height:50px;    background-color:green;    display:inline-block    }

実行結果:

真ん中の隙間については、本質的な原因は要素間の空白にあるので、親にfone-sizeを設定する要素のサイズで、空白のギャップのサイズを調整できます。

.boxBg{    margin: 0 auto;    width:500px;    height:200px;    border:2px solid #ccc;    font-size:34px;}

font-size:34px に変更すると、隙間が広くなります。

実行結果:

同様に、隙間をなくしたい場合は、 font-size:0;

.boxBg{    margin: 0 auto;    width:500px;    height:200px;    border:2px solid #ccc;    font-size:0}

を変更する必要があります

実行結果:

このようにして、目的のレイアウトが実現されます、ボックス内のテキストも消えました。これは、テキストのサイズがギャップに影響を与えることも証明しています。子要素でリセットするだけです。もちろん、今日の焦点はそこではありません。同じ効果 float:left; も簡単に実現できます。

<style>    .boxBg{    margin: 0 auto;    width:500px;    height:200px;    border:2px solid #ccc;    }    .box1{    width:100px;    height:50px;    background-color:red;    float:left    }    .box2{    width:100px;    height:50px;    background-color:blue;    float:left    }    .box3{    width:100px;    height:50px;    background-color:green;    float:left    }</style>

実行結果:

要素に float を追加した後、浮動要素は親要素の境界線または別の浮動要素の境界線にぶつかった直後に表示されます。たとえば、次の例では、フローティング要素の合計幅が親要素よりも大きい場合、行が折り返されると、前のフロートが検出され、その後に表示されます。実行結果:

inline-block を使用した場合、結果はどうなるでしょうか?

    <style>    .boxBg{    margin: 0 auto;    width:500px;    height:200px;    border:2px solid #ccc;    }    .box1{    width:100px;    height:100px;    background-color:red;    float:left    }    .box2{    width:100px;    height:50px;    background-color:blue;    float:left    }    .box3{    width:400px;    height:50px;    background-color:green;    float:left    }</style>

実行結果:

このとき、ボックス 3 はボックス 1 に続くのではなく、新しい行で始まります (1 と 2 の間のギャップについてはここでは説明しません)。これも inline- を使用した方法です。ブロックとfloatの判定でモジュールの幅が異なる場合、floatレイアウトを使用すると予想と異なる結果が生じる可能性があるため、幅と高さを変更しない場合はfloatを使用するのが優れています。矛盾している場合は、を確認する必要があります。特定のレイアウトを使用し、適切な属性を使用します。

コードは以下に掲載されており、変更された部分のみが掲載され、残りは変更されず、構造も変更されません。

box3 の float: left を削除すると結果はどうなりますか?理解によれば、フローティング要素はスペースを占有しません。つまり、フレーム 3 はフレーム 1 を無視し、フレーム 2 は親要素の境界線のすぐ隣に表示されます。つまり、フレーム 1 がフレーム 3 を覆います。結果？

  <style>    .boxBg{    margin: 0 auto;    width:500px;    height:200px;    border:2px solid #ccc;    }    .box1{    width:100px;    height:100px;    background-color:red;    display:inline-block    }    .box2{    width:100px;    height:50px;    background-color:blue;    display:inline-block    }    .box3{    width:400px;    height:50px;    background-color:green;    display:inline-block    }</style>

実行結果:

ボックス 3 のテキストがボックス 1 に隠れずに下に表示されるのはなぜですか?次に、コードと画像を見てください

.box3{    width:100px;    height:50px;    background-color:green;}

実行結果:

違いがわかりますか?はい。 box3 は幅を定義しません。幅を定義しないと、デフォルトの幅は親要素の幅になります。つまり、この時点では、浮動要素が非浮動要素をカバーします。 、ボックス 3 の前の 200 ピクセルの幅はカバーされたフローティング要素によって占められていますが、テキストがカバーされず、テキストがフローティング要素の 200 ピクセル後ろに押し込まれているのはなぜですか?

フローティング要素はブロックのスペースを占有しないため、ボックス 3 は親コンテナの幅 500px の 100% になりますが、フローティング要素は他のスペース、つまりライン ボックス スペースを占有することになります。テキストが占めるスペース。

これは、テキストが画像をフローティングした後に自動的に画像の周りを回り込む理由でもあります。フローティング要素はブロックレベルのスペースを占有しませんが、ブロックレベル要素内のテキストおよびインライン要素に影響を与えます。

3 つのボックスの幅を同じにしたい場合は、3 つのボックスの幅を 300px に変更するだけです。