Forçar um absolutamente elemento posição flutuou ou para ficar “no fluxo” com CSS

Question

Eu estou procurando uma maneira de forçar flutuou ou elementos de permanecer no fluxo em css posição absoluta. Eu sou praticamente css pensamento é estúpido por não ter algo como fluxo: em fluxo: off para mantê-lo no fluxo ou tirá-lo.

O problema é que eu quero ter um elemento div com uma altura variável, tenho uma imagem flutuou à esquerda na div, e eu quero o div para ser pelo menos a altura da imagem. Eu também quero que seja pelo menos suficientemente grande para conter todo o texto que está no fluxo (isto obviamente não é um problema).

Eu preciso da imagem para ser capaz de variar em tamanho. Atualmente, estou usando uma solução jQuery, mas a sua agindo para cima. Desde que eu não me sinto como a depuração, e eu sinto que há deve ser algum tipo de solução CSS, eu estou pedindo.

Alguém sabe como posso fazer isso?

Answer 1

Eu costumo ir com overflow: hidden ou overflow: auto.

Answer 2

Em vez de usar um novo elemento para limpar o div no final, você pode adicionar este para o css div absoluta;

overflow: auto;

Obviamente IE gosta de jogar de forma diferente, você precisa fornecer uma largura para ele também. Estou assumindo o div absoluta tem uma largura conjunto ... então você pode apenas configurá-lo para que a largura.

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

Answer 3

Um hack que pode funcionar em sua situação é adicionar outro elemento dentro de sua div após o resto do conteúdo que tem a propriedade CSS claro conjunto de "ambos" (ou à esquerda, uma vez que sua imagem está à esquerda). por exemplo:

<br style="clear: both" />

Isto irá forçar o elemento abaixo os elementos flutuantes, que vai esticar a div que contém.