Заставить плавающий или абсолютно позиционный элемент оставаться «в потоке» с помощью CSS

Question

Я ищу способ заставить плавающие или абсолютно позиционированные элементы оставаться в потоке в css. Я в значительной степени думаю, что css глуп, потому что у него нет чего-то похожего на поток: на поток: выключен, чтобы держать его в потоке или вынимать.

Проблема в том, что я хочу иметь элемент 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

Хак, который может сработать в вашей ситуации, - это добавить еще один элемент в ваш div после остального содержимого, у которого свойство clear CSS установлено в значение «both» (или влево, поскольку ваше изображение слева). например:

<br style="clear: both" />

Это заставит элемент ниже всплывающих элементов растянуть содержащий div.