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

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 仮想マシンのインストール操作方法