floating要素とcss背景色

Web開発では、CSSのスタイリング要素は、フローティング要素を含むシナリオに遭遇するときに挑戦することができます。これは、「フロート」プロパティを使用してドキュメントの通常のフローから要素が削除され、親要素の寸法と背景色の問題につながると発生する可能性があります。各divを背景色に割り当てます：親は赤、浮遊要素には緑と黄色を割り当てます。

。 幅：960px; 高さ：自動; マージン：0 Auto; 背景：赤; クリア：両方; } 。左 { フロート：左; 高さ：300px; 背景：緑; } 。右 { フロート：そうです; 背景：黄色。 }

.content {
    width: 960px;
    height: auto;
    margin: 0 auto;
    background: red;
    clear: both;
}

.left {
    float: left;
    height: 300px;
    background: green;
}

.right {
    float: right;
    background: yellow;
}

いずれかの値を「コンテンツ」divに適用すると、この例では崩壊の問題が修正され、親がそのコンテンツサイズに応じて拡張し、赤い背景全体を公開します。

。 オーバーフロー：隠し; ... }

これにより、浮遊要素にもかかわらず、親の寸法が保存され、問題を効果的に解決することが保証されます。