HTMLフロートの使用法の簡単な分析

float の使用例

左サスペンション: float:left;
右サスペンション: float:right;

フロートの使用

フロートには幅広い用途があります。ここでは、最も一般的な用途について簡単に紹介します。

• float に出会う前は、div インレイで inline-block 属性と block 属性をいくつか設定して、ページのレイアウトを完成させていました。その後、float 属性に出会い、要素を直接 float することがはるかに簡単になりました。float では、ブロック レベル要素、インライン要素、またはインライン ブロック要素の区別はありません。また、float は親要素の幅が変わると自動的にレイアウトします。たとえば、表示ウィンドウを直接調整すると、要素が次の行に押し出されます。
• また、先ほど学んだSEO最適化に関してですが、ブラウザは上から下に解析するため、重要なコンテンツは前面に書かれ、重要でないコンテンツや広告は後ろに書かれることが多いです。しかし、広告にも注目してもらいたいので、メインのコンテンツを中央に配置し、左右に広告を吊り下げることが多いです。ウェブをよく閲覧する友人もこれに気づいていると思います。次に、吊り下げの書き方と効果についていくつかお話ししましょう。

子要素が中断されると、親要素の高さが縮小されます。これには中断のクリアが伴いますが、これについては次の章で説明します。
では本題に戻りましょう。

最初の現象はfloat=inline-blockです

一時停止すると、4つのブロックがインラインブロックモードで表示されます。以下に示すように

<スタイル>
        div{
            幅:200px;
            高さ:200px;
            背景色: ピンク;
            border:1px 黒一色;
            フロート:左;
        }
    </スタイル>

<本文>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</本文> 

2番目の現象:

下の図に示すように、最初のブロック要素はフローティングなので、2 番目のブロック要素は最初のブロック要素の下に表示されます。
ただし、次の要素が中断されると、前の要素の上に移動することはありません。たとえば、4 番目のブロック要素は中断されますが、3 番目のブロック要素は中断されません。4 番目のブロック要素は元の位置に残ります。

 <スタイル>
        .最初の1つ{
            フロート:左;
            背景色:緑;
        }
        .2番目{
            背景色:紫;
        } 
        .3番目{
           
            背景色:青;
        } 
        .4番目{
            フロート:左;
            背景色:グレー;
        } 
        div{
            幅:200px;
            高さ:200px;
            背景色: ピンク;
            border:1px 黒一色;
            フォントサイズ:30px;
        }
    </スタイル>

<本文>
    <div class="first-one"></div>
    <div class="second-one"></div>
    <div class="third-one"></div>
    <div class="4th-one"></div>
</本文> 

3番目の現象:

すべての要素がフロートされていて、親要素の残りの幅が行内の子要素をサポートするのに十分でない場合は、子要素は上位レベルに揃えられます。

この記事は https://segmentfault.com/a/1190000022669455 から転送されました。

要約する

HTML フロートの使い方に関するこの記事はこれで終わりです。より関連性の高い HTML フロート コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。