html - pantalla - Cómo ajustar la altura de un div para envolver a sus hijos flotantes

div que se ajuste a la pantalla bootstrap

Question

Tengo un div envuelto alrededor de dos niños, uno flotó 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 una altura de 0, ya que no cambia el tamaño para adaptarse a los niños

Aquí hay un ejemplo de ello en acción: http://jsfiddle.net/VVZ7j/17/

Quiero que el fondo rojo descienda por completo. He intentado la altura: auto, pero eso no funcionó.

Cualquier ayuda sería apreciada, gracias.

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

Answer 1

Añadir overflow: hidden; envolver. Esta es una clear fix . Aquí hay algo de documentación al respecto: http://positioniseverything.net/easyclearing.html

LE: También hay varias formas de lograr esto, dependiendo de la compatibilidad del navegador:

1. Añadir desbordamiento: oculto al contenedor padre.

#wrap { overflow: hidden; }

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

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

1. La técnica más utilizada es agregar un extra como el último elemento del contenedor principal.

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

Prefiero not usar el tercero ya que obtienes un código HTML adicional.

Answer 2

Este es un problema común cuando se trabaja con flotadores. Existen varias soluciones comunes, que ordené por preferencia personal (el mejor enfoque primero):

1. Usa el :: después del pseudo elemento CSS. Esto se conoce como ''clearfix'', y funciona con IE8 y superior. Si necesita compatibilidad con versiones anteriores de IE, esta respuesta debería ayudar . Example .

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

2. Agregue los dos flotantes en un contenedor con el atributo de overflow: auto 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 un alto de conjunto al elemento padre. Example .

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

4. Hacer el elemento padre un flotador. Example .

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

5. Agrega un div después de las carrozas con clear: both . Example .

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

Answer 3

He venido a comenzar a usar esta solución "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;
}

Solo agréguelo a su CSS y a cualquier elemento flotante, agregue la clase "cf" a la envoltura de cualquier elemento que haya flotado hijos.

Answer 4

Intente agregar overflow: hidden a su #wrap div .

Answer 5

Simplemente agregue un div más con estilo claro: ambos antes de cerrar un div exterior, es decir, aquí "envolver"

--Código de muestra--

<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>