フロートした要素または絶対位置にある要素をフロー内にとどまるように強制します＆＃8221; CSSを使用

Question

浮動または絶対配置された要素をcss内のフローにとどまるように強制する方法を探しています。私はcssがflow：on flow：offのようなものをフローに保持したり取り出したりしないために愚かだと考えています。

問題は、可変の高さを持つdiv要素が必要であり、divの左側にフロート画像があり、divが少なくとも画像の高さであることです。また、少なくともフロー内にあるすべてのテキストを保持するのに十分な大きさにしたいです（これは明らかに問題ではありません）。

画像のサイズを変更できるようにする必要があります。私は現在jQueryソリューションを使用していますが、うまく機能しています。私はデバッグしたくないと感じており、ある種のCSSソリューションがあるべきだと思うので、私は尋ねています。

誰も私がこれを行う方法を知っていますか？

Answer 1

通常、 overflow：hidden または overflow：auto を使用します。

Answer 2

新しい要素を使用して最後のdivをクリアする代わりに、これを絶対div cssに追加できます。

overflow: auto;

明らかに IEはプレイ方法が異なるため、幅も指定する必要があります。絶対divには幅が設定されていると仮定しています...その幅に設定するだけです。

.abs-div {
    position: absolute;
    overflow: auto;
    width: 160px; /* Replace with your width */
}

Answer 3

あなたの状況で機能するハックは、CSSのclearプロパティが「both」に設定されている残りのコンテンツの後に、div内に別の要素を追加することです。 （または、画像は左側にあるため、左側）。例：

<br style="clear: both" />

これにより、フロートされた要素の下に要素が強制的に配置され、含まれているdivが引き伸ばされます。