html - クロームのフローティングDivは、親divをクリアします

Question

高さが可変の親divがあります。この親divには、さらに2つのdivがそれぞれ左と右に浮かんでいます。親divの背景は、両方の子divの後に終了する必要があります。しかし、Chromeではそうではありません（IEは完全に機能しています）。親divの背景は、childreandivが開始する前に終了します。フロートが子divから削除された場合、それは問題ありませんが、それらは互いに隣接していません。

Answer 1

overflow: auto親divに設定してみてください。

問題は、親が新しいブロック書式設定コンテキストを確立しない限り、フロートが親に含まれないことです。オーバーフロー: auto は、他のいくつかのことと同様にそれを行います (フローティングを含む - 親ボックスをフロートさせ、子フロートを含めます)。

ただし、新しいブロックの書式設定コンテキストを確立することは、目的を達成するために必要ではありません。ほとんどの人は、そのようにすることさえしません。

これがあなたが持っているものですよね？

HTML

<div class="out">
    <div class="left"></div>
    <div class="right"></div>
</div>

CSS

.left {
    float: left;
}

.right {
    float: right;
}

フロートの下に新しい要素を挿入して (cleardiv のクラスを与えましょう)、clear: bothそれに適用すると、同じ要素が、その上にあるすべてのフロート要素の下に押し下げられます。また、それ自体は浮動要素ではないため、ご想像のとおり、親要素に含まれます。
したがって、それが親要素に含まれていて、それが一番下にプッシュされている場合、親要素は必要に応じて一番下まで「引き伸ばされる」必要があります。

新しいHTMLはこちら

<div class="out">
    <div class="left"></div>
    <div class="right"></div>
    <div class="cleardiv"></div>
</div>

CSS

.left {
    float: left;
}

.right {
    float: right;
}

.cleardiv {
    clear: both;
}