CSS: Flotante divs tienen 0 altura

Question

Estoy intentando colocar 2 divs lado a lado dentro de otro div, de modo que pueda tener 2 columnas de texto y el div exterior dibujar un borde alrededor de dos de ellos:

HTML

<div id="outer"> 
    <div id="left"> 
     ... 
    <div id="right"> 
</div> 

CSS

#outer{ 
    background-color:rgba(255,255,255,.5); 
    width:800px; 
} 

#left{ 
    float:left; 
} 

#right{ 
    width:500px; 
    float:right; 
} 

sin embargo, el div exterior registra una altura de 0px y así la frontera no gira alrededor de los otros divs. ¿Cómo hago para que el div externo reconozca las alturas de las cosas dentro de él?

Answer 1

No es porque los divs flotantes no tengan una altura, es porque los divs flotantes no afectan el tamaño del elemento principal.

Usted puede utilizar el estilo overflow para hacer que el elemento padre toma los elementos que flotan en consideración:

#outer { overflow: auto; } 

Answer 2

Puede despejar el flotador insertando un elemento después de los elementos flotados que tiene una propiedad clear aplicada porque los elementos secundarios flotantes hacen que el elemento primario tenga 0 alto ya que no toman en consideración la altura de los elementos flotantes .

<div id="outer"> 
    <div id="left"> 
     ... 
    <div id="right"> 
    <div class="clear"></div> 
</div> 

#outer{ 
    background-color:rgba(255,255,255,.5); 
    width:800px; 
} 

#left{ 
    float:left; 
} 

#right{ 
    width:500px; 
    float:right; 
} 
.clear{ clear: both; } 

Answer 3

Prueba esto:

<div id="outer"> 
    <div id="left"> 
     ... 
    <div id="right"> 
    <div style="clear:both"></div> 
</div> 

Answer 4

desbordamiento complemento: hidden; a la div principal.

<style type="text/css"> 
#outer{ 
    background-color:rgba(255,255,255,.5); 
    width:800px; 
overflow: hidden; 
border: 1px solid green; 
} 

#left{ 
    float:left; 
border: 1px solid red; 
} 

#right{ 
    width:500px; 
    float:right; 
border: 1px solid yellow; 
} 
</style> 

Answer 5

Hay un par de soluciones a este problema:

#outer: overflow: hidden; 

o añadir algún contenido no se presentan a la div externa que viene después de los divs flotados que a continuación, añadir una clara: tanto el estilo gobernar a.

También puede agregar, through css, el: después del pseudo-elemento para insertar contenido después de esos divs que luego se aplican claros: ambos a - esto tiene la ventaja de que no requieren marcado adicional.

Mi preferencia es la primera.

Answer 6

También debe flotar el div exterior. Las divisiones que contienen floatet div y que no flotan se colapsan.

#outer{ 
    background-color:rgba(255,255,255,.5); 
    width:800px; 
    float:left; 
} 

#left{ 
    float:left; 
    width:300px; 
} 

#right{ 
    width:500px; 
    float:right; 
} 

Answer 7

¿Cómo combate la siguiente manera:

<style type="text/css"> 
#outer{ 
    background-color:rgba(255,255,255,.5); 
    width:800px; 
    border:thin solid #000000; 
    height:300px; 
    margin:5px; 
    padding:10px; 
} 

#left{ 
    float:left; 
    border:thin dashed #000000; 
    width:385px; 
    height:100px; 
    margin:5px; 
} 

#right{ 
    width:385px; 
    float:left; 
    border:thin dashed #000000; 
    height:100px; 
    margin:5px; 
} 
</style> 

<div id="outer"> 
    <div id="left"> 
    </div> 
     ... 
    <div id="right"> 
</div> 
</div> 

Answer 8

si div dentro de una matriz se flota que ya no forma parte de la div padre: comprobarlo mediante la inspección de element.no padre para arreglar el problema hay dos métodos: 1) hacen un div vacío al extremo interior de la clase padre como .blank todos siguiendo css

.blank:after{ 
     content: ""; 
     clear:both; 
     display:block; 
    } 

O 2) dar a los padres una clase.clara-fix y añadir CSS

.clearfix:after { 
content: ""; 
clear: both; 
display: block; 

} que dará a los padres una altura igual a contenidos