tamaño - CSS: DIV sin altura en el conjunto de flotadores

posicionamiento y visualización css

Question

Supongamos que tenemos este código:

<div id=''upperDiv'' style=''min-height:200px;border: 1px solid #000000;''>
<div id=''rightDiv'' style=''float:right;width:75%;''>
content1
</div>
<div id=''leftDiv'' style=''float:left;width:25%;''>
content2
</div>
</div>
<div id=''lowerDiv'' style=''height:50px;border: 1px solid #000000;margin-top:5px;''>
content3
</div>

Cuando el contenido de rightDiv y leftDiv pasa la altura de 200px (la altura mínima) upperDiv no crece, por lo que su contenido se superpone a la división inferior. Si elimino el atributo float del contenido grande, crece y habrá un problema. Pero no sé qué Div (rightDiv o leftDiv) pasa 200px de altura. ¿Cómo puedo arreglar esto?

Gracias

Answer 1

Después

 <div id=''leftDiv'' style=''float:left;width:25%;''>
content2
</div>

añadir

 <div style="clear:both"></div>

Solucionará tu problema.

Answer 2

Establecer #upperDiv cualquiera de los siguientes:

overflow: hidden;
width: 100%;

o

float: left;
width: 100%;

o cree una regla utilizando pseudo-elementos CSS (compatible con IE8 +) como este

#upperDiv:after {
content: "";
display: table;
clear: both;
}

Mejor solución
Creando una regla de clase reutilizable como la siguiente.

.group:after {
content: "";
display: table;
clear: both;
}

Ahora puedes aplicarlo a cualquier cosa que necesite esta misma funcionalidad. Por ejemplo...

<div id=''upperDiv'' class="group" ... >

PS Si necesita compatibilidad con IE 6/7, consulte esta publicación .

Answer 3

Esto es intencional ya que los flotadores están diseñados para cosas como imágenes en párrafos (donde varios párrafos pueden envolver alrededor de la imagen).

Complex Spiral tiene una explicación más completa de por qué y Ed Elliot describe una serie de enfoques para hacer que los contenedores se expandan alrededor de flotadores . Encuentro el overflow: hidden enfoque overflow: hidden funciona mejor en la mayoría de las situaciones.