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

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 をよろしくお願いいたします。

<<:  JavaScript の Set データ構造の詳細な説明

>>:  Dockerカスタムネットワーク実装

推薦する

初心者がHTMLタグを学ぶ(3)

HTML に触れる初心者は、いくつかの HTML タグを学びます。関連記事:初心者が学ぶ HTML...

Linux環境でグラフデータベースneo4jを構築する方法の説明

Neo4j (Nosql の 1 つ) は、高性能なグラフ データベース (分散をサポートしていませ...

Ubuntu 20.04 オペレーティング システムの VMware インストール チュートリアル図

メモ: とにかく体験してみましょう。記録: NO.209この例の環境:仮想マシン: vmwareオペ...

MySQL でトランザクションのコミットとロールバックを実装する方法の詳細な例

最近、データベース データのスケジュールされた移行を実行する必要があります。実行プロセス中に何らかの...

MySQL のインデックスとデータ テーブルを管理する方法

目次テーブルの競合を見つけて修正するインデックス統計の更新テーブルの競合を見つけて修正するデータ テ...

VSCode+CMake+Clang+GCC 環境構築チュートリアル (Win10 の場合)

大学院入試に備えて、C/C++ を使って基本的なデータ構造とアルゴリズムを実装する予定です。アルゴリ...

MySQL truncate table ステートメントの使用

Truncate table ステートメントは、テーブル内のすべてのデータを削除/切り捨てるために使...

大きなオフセットによる MySQL 制限ページングが遅い理由と最適化ソリューション

MySQL では通常、limit を使用してページ上のページング機能を完了しますが、データ量が大きな...

通知メッセージカルーセルを実装するための CSS3 トランジション

Vueバージョンをファイルにコピーして使用します <テンプレート> <!-- カル...

Vue ソースコード学習でレスポンシブ性を実装する方法

目次序文1. レスポンシブシステムの重要な要素1. データの変更を監視する方法2. 依存関係を収集す...

VUEウォッチリスナーの基本的な使い方の詳しい説明

目次1. 次のコードはwatchの簡単な使用法です2. 即時監視3. ハンドラメソッド4. 深い属性...

jQueryはシンプルなカルーセル効果を実装します

みなさんこんにちは。今日はカルーセルの実装についてお話しします。私が作成したカルーセルの効果は次のと...

React スキャフォールディングのパスエイリアスを設定する方法

この記事を書いている時点でのReactのバージョンは16.13.1です1 npm run eject...

MySQL 8.0.18 インストール構成の最適化チュートリアル

MySQLのインストール、設定、最適化は参考用です。具体的な内容は次のとおりです。 MySQL ダウ...

フロントエンドJavaScriptのクラス

目次1. クラス1.1 コンストラクタ() 1.2 ゲッターとセッター1.3 これ1.4 静的プロパ...