Flotante crea divisiones superpuestas

Tengo dos divs (uno dentro del otro) y me encuentro con un pequeño problema cuando hago flotar el que está adentro a la "izquierda". El problema es que el div externo no expande su altura para ajustarse al texto dentro del div interno. Dado que esto es probablemente bastante confuso, intentaré explicarlo con algún código.Flotante crea divisiones superpuestas

HTML:

<body> 
    <div id="div1"> 
     Inner Div: 
     <div id="div2">Testing long content.</div> 
    </div> 
</body>

CSS:

#div2 { 
    float: left; 
    width: 10px; 
}

Prefiero espero que cuando se prueba este hecho demuestra mi problema ya que no he tenido la oportunidad de probar esto. Mi código real tiene más propiedades que plantearé si es necesario.

Fuente

2009-06-21 PF1

Tiene que utilizar la corrección. Inserta lo siguiente después de tu div flotante y dentro del div que contiene.

<div class="clear"></div>

Y añadir el siguiente estilo:

.clear { clear:both; }

Ejemplo:

<div class="container"> 
    <div class="floatedDiv">Hello World</div> 
    <div class="clear"></div> 
</div>

Fuente

2009-06-21 03:49:03 Sampson

Gracias Jonathan: Esto funcionó muy bien! – PF1

genio :) su trabajo –

No es una solución. Está claro. Solo tiene que borrar el flotante :) –

(La tercera vez en el día :-)) dará el desbordamiento div exterior: hidden;
y ancho.

Fuente

2009-06-21 03:49:55

¿De verdad? Lo siento por eso, de verdad. Creo que tengo que trabajar en cambiar mis consultas de búsqueda para expresar mejor lo que otras personas llaman el mismo problema. – PF1

... o auto –

Agregar un ancho a un elemento para asegurarse de que crece en altura hace que el código CSS sea difícil de leer, dudo que sea una solución sensata. La solución de zoom: 1 parece mejor, supongo, pero probablemente no sea válida w3c css. El desbordamiento: oculta también una buena solución, pero hace que su CSS también sea difícil de leer porque no se trata de un desbordamiento para ocultar el contenido, sino que también se usa para permitir que el elemento crezca en tamaño. – Michiel

Si no desea agregar marcas adicionales a su html o añadir un ancho a su div externa, puede utilizar:

#div1 { 
    overflow:hidden; /* clears float for most browsers */ 
    zoom:1;   /* clears float for IE6   */ 
    }

Fuente

2009-06-21 11:45:12 Emily

Pensé desbordamiento: ¿funcionó también en IE6? – alex

No. Para borrar flotadores para IE6, necesita invocar hasLayout. Esto se hace dando al elemento una posición, flotación, pantalla, ancho, alto o zoom. Proporcionar ancho o alto es la forma más común de invocar hasLayout, pero a veces no desea especificar una dimensión y el zoom es el más transparente. Vea hasLayout.net para más información. – Emily

Ah - Agrego pantalla: bloquea generalmente todo lo que contiene elementos flotantes. – alex

Quizás útil tener en cuenta que también existe el código clearfix bien sabe desde positioniseverything que está escrito específicamente para este problema y es probablemente el más robusto y más fácil de aplicar en cualquier situación. El CSS se ve de la siguiente manera:

<style> 
div.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 
div.clearfix { display: inline-block; margin: 0 0 8px 0; } 
/* Hides from IE-mac \*/ 
* html div.clearfix { height: 1%; } 
div.clearfix { display: block; } 
/* End hide from IE-mac */ 
</style>

Con el fin de utilizarlo en su situación haría lo siguiente:

<body> 
<div id="div1" class="clearfix" >Inner Div: 
<div id="div2">Testing long content.</div> 
</div> 
</body>

Fuente

2009-06-21 17:47:18 Michiel

la altura: 1% resolvió todo mi problema. Sin embargo, no estoy seguro de por qué. ¿Podría explicar lo que hace en el contexto de una serie de elementos flotantes con 2 o más elementos no flotantes en su cola? – Emanegux

Mientras que las soluciones anteriores deben trabajar, supongo que vale la pena señalar que hay una truco mágico que no he visto considerado todavía (en este hilo).

Just float # div1 left. Cuando se flota el elemento padre, se borrará automágicamente el elemento secundario, bastante útil, realmente. Podrías construir un diseño completo de pilas flotantes, y luego tener una final clara al final, y sería bastante confiable.

Fuente

2009-06-22 08:26:18

Desafortunadamente las carrozas son altamente adictivas. Es mejor usarlos con moderación y rociar el desbordamiento extraño: oculto; – GlennG

Flotante crea divisiones superpuestas

Respuesta

Cuestiones relacionadas