浮遊要素によって引き起こされる問題と解決策の詳細な説明

浮遊要素によって引き起こされる問題と解決策の詳細な説明

1. 問題

  • 複数のフローティング要素は親要素の幅を拡張できず、親要素の高さが 0 になる可能性があります。
  • フロート要素の後に非フロート要素が続く場合、非フロート要素はその直後にフロートします。
  • フローティング要素の前にフローティングされていない同じレベルの要素がある場合、ページ構造に影響します。

2. 解決策

1. クリア: 両方

最後のフロート要素の後に、clear:both; 属性を持つ要素を追加します。

<スタイル>
div.parent>div.fl{
    フロート: 左;
    幅: 200ピクセル;
    高さ: 200px;
    右マージン: 20px;
    境界線: 1px 実線の赤;
}
。クリア{
    クリア: 両方;
}
</スタイル>
<div class="parent">
    <div class="fl">1</div>
    <div class="fl">2</div>
    <div class="fl">3</div>
    <div class="fl">4</div>
    <div class="clear">5</div>
</div>

clear:both; 属性を持つ :after 疑似要素を親要素に追加します。

<スタイル>
div.parent>div.fl{
    フロート: 左;
    幅: 200ピクセル;
    高さ: 200px;
    右マージン: 20px;
    境界線: 1px 実線の赤;
}
.clear:after{
    コンテンツ: '';
    表示: ブロック;
    クリア: 両方;
}
</スタイル>
<div class="親クリア">
    <div class="fl">1</div>
    <div class="fl">2</div>
    <div class="fl">3</div>
    <div class="fl">4</div>
</div>

注: 擬似要素はデフォルトでインラインなので、擬似要素を使用する場合は、属性 display: block; を設定する必要があります。

2. オーバーフロー:自動 / オーバーフロー:隠し

<スタイル>
div.親{
    オーバーフロー:自動;
    /*overflow: hidden; も動作します*/
}
div.parent>div.fl{
    フロート: 左;
    幅: 200ピクセル;
    高さ: 200px;
    右マージン: 20px;
    境界線: 1px 実線の赤;
}
</スタイル>
<div class="parent">
    <div class="fl">1</div>
    <div class="fl">2</div>
    <div class="fl">3</div>
    <div class="fl">4</div>
</div>

3. フローティング親要素

<スタイル>
div.親{
    フロート: 左;
}
div.parent>div.fl{
    フロート: 左;
    幅: 200ピクセル;
    高さ: 200px;
    右マージン: 20px;
    境界線: 1px 実線の赤;
}
</スタイル>
<div class="parent">
    <div class="fl">1</div>
    <div class="fl">2</div>
    <div class="fl">3</div>
    <div class="fl">4</div>
</div>

注意: この方法は、親要素のレイアウトに問題が発生するため、通常は使用されません。

以上で、フローティング要素が原因のトラブルとその解決策についての記事は終了です。フローティング要素が原因のトラブルについての詳細は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  JavaScript の 3 つの BOM オブジェクト

>>:  VMware Workstation 仮想マシンのインストール操作方法

推薦する

MySQLのMERGEストレージエンジンの詳細な説明

MERGE ストレージ エンジンは、MyISAM テーブルのグループを論理ユニットとして扱い、同時に...

Linux のリンク解除機能とファイルの削除方法

1. リンク解除機能ハード リンクの場合、unlink はディレクトリ エントリを削除し、inode...

HTML シンプルな Web フォーム作成例の紹介

<input> はユーザー情報を収集するために使用され、終了ステートメントはありません。...

JS ES6コーディング標準の詳細な説明

目次1. ブロックスコープ1.1. let は var を置き換える1.2. グローバル定数とスレッ...

独自の FTP および SFTP サーバーを構築するプロセスの紹介

FTP と SFTP はファイル転送プロトコルとして広く使用されています。関連する機能を開発するには...

HTML の 5 種類のスペースの意味

HTML には、幅の異なる 5 つのスペース エンティティが用意されています。非改行スペース ( )...

React Native JSIはRNとネイティブ通信のサンプルコードを実装します

目次JSIとはJSIの違いiOS で JSI を使用するiOS 設定RN側の構成jsはパラメータ付き...

Linux に Python 3.8.1 をインストールするための詳細なチュートリアル

この例では、Linux への Python 3.8 のインストールを例に挙げます。 1. 依存パッケ...

チェックボックスの選択またはキャンセルを実装するJavaScript

この記事では、すべてのチェックボックスを選択または解除するためのJavaScriptの具体的なコード...

HTML テーブルタグチュートリアル (7): 背景色属性 BGCOLOR

テーブルの背景色は、BGCOLOR 属性を通じて設定できます。基本的な構文<テーブル BGCO...

Linux で利用可能なネットワーク インターフェイスを表示する方法

序文Linux システムをインストールした後の最も一般的なタスクは、ネットワーク構成です。もちろん、...

MySql インデックス使用戦略の分析

MySql インデックスインデックスの利点1. 一意のインデックスまたは主キー インデックスを作成す...

HTMLポップアップdivはモバイルの中央揃えを実現するのに非常に便利です

コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...

Linux ファイル操作でよく使われるコマンドのまとめ

0. 新しい操作: mkdir abc #新しいフォルダを作成 touch abc.sh #新しいフ...

CentOS7 カーネル カーネル5.0 バージョンアップグレード

アップグレードプロセス:元のシステム: CentOS7.3 [root@my-e450 ~]# un...