CSS: DIV que no contiene altura en el flotador establece

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 200 píxeles (la altura min) upperDiv no crece, por lo que su superposiciones de contenido la div inferior Si elimino el atributo flotante del contenido grande, crece y habrá un problema. Pero no sé qué Div (rightDiv o leftDiv) pasa la altura de 200px. ¿Cómo puedo solucionar esto?

Gracias

Answer 1

Set #upperDiv cualquiera de los siguientes:

overflow: hidden; 
width: 100%; 

o

float: left; 
width: 100%; 

o crear una regla usando CSS pseudo-elementos (IE8 + compatibles) como esto

#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 puede aplicarlo a cualquier cosa que necesite esta misma funcionalidad. Por ejemplo ...

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

P.S. Si necesita la compatibilidad con IE 6/7, obtenga this post.

Answer 2

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 la imagen).

Complex Spiral tiene un fuller explanation por qué y Ed Elliot describe un número de approaches to making containers expand around floats. Encuentro que el enfoque overflow: hidden funciona mejor en la mayoría de las situaciones.

Answer 3

Después

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

añadir

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

Se va a resolver su problema.