Cómo caber la altura de un div para envolver a sus hijos flotados

Question

Tengo un div envuelto alrededor de dos niños, uno flota a la izquierda y el otro a la derecha. Quiero poner un borde y un fondo alrededor de los niños, pero el div tiene 0 de altura ya que no cambia el tamaño para adaptarse a los niños.

Aquí se muestra un ejemplo de él en acción: http://jsfiddle.net/VVZ7j/17/

Quiero el fondo rojo para ir hasta el fondo. Intenté con la altura: automático, pero eso no funcionó.

Se agradecerá cualquier ayuda, gracias.

P.S. No quiero usar ningún javascript si eso es posible.

Answer 1

Esto es un problema común cuando se trabaja con flotadores. Hay varias soluciones comunes, que he ordenados por preferencia personal (mejor enfoque en primer lugar):

1. utilizar el :: después de CSS pseudo-elemento. Esto se conoce como 'clearfix' y funciona IE8 y superior. Si necesita compatibilidad con versiones anteriores de IE, this answer should help. Example.

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

2. Añadir los dos flotadores en un recipiente con el atributo CSS overflow: auto o overflow: hidden. Sin embargo, este enfoque puede causar problemas (por ejemplo, cuando una información sobre herramientas se superpone a los bordes del elemento principal aparecerá una barra de desplazamiento). Example.

   <div style="overflow: auto"> 
       <div style="float: left"></div> 
       <div style="float: left"></div> 
   </div> 
   

3. Agregue una altura de conjunto al elemento principal. Example.

   <div style="height: 200px"> 
       <div style="float: left"></div> 
       <div style="float: left"></div> 
   </div> 
   

4. Hace que el elemento principal sea flotante. Example.

   <div style="float: left"> 
       <div style="float: left"></div> 
       <div style="float: left"></div> 
   </div> 
   

5. Añadir un div después de los flotadores con clear: both. Example.

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

Answer 2

Agregue overflow: hidden; a # envoltura. Este es un clear fix. Aquí hay algo de documentación sobre el tema: http://positioniseverything.net/easyclearing.html

LE: También hay varias maneras que usted puede lograr esto, dependiendo del navegador compatibilty:

1. Añadir overflow: hidden al contenedor principal.

#wrap { overflow: hidden; }

1. Use un pseudo-elemento para agregar clear: both.

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

1. El tehnique más comúnmente utilizado es añadir un extra como el último elemento del contenedor primario.

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

Yo prefiero que esté not utilizar la tercera uno a medida que el formato HTML adicional.

Answer 3

Intente agregar overflow: hidden a su #wrapdiv.

Answer 4

Sólo tiene que añadir una más div con estilo claro: tanto antes de cerrar un div externa es decir aquí "envolver"

--Sample code--

<div id="wrap"> 
    <div id="left"> 
     <p>some content at left</p> 
    </div> 
    <div id="right"> 
     <p>some content at right</p> 
    </div> 
    <div style="clear:both"></div> 
</div> 

Answer 5

He comenzado a utilizar esta solución de "micro-clearfix" de Nicolas Gallagher.

http://nicolasgallagher.com/micro-clearfix-hack/

/* For modern browsers */ 
.cf:before, 
.cf:after { 
    content:""; 
    display:table; 
} 

.cf:after { 
    clear:both; 
} 

/* For IE 6/7 (trigger hasLayout) */ 
.cf { 
    *zoom:1; 
} 

Sólo añadir que a su CSS y cualquier elemento flotante, añadir la clase "cf" a la envoltura de cualquier cualquier elemento que ha flotado niños.