subtitulos - tag css en html

La altura de los padres no sigue a sus hijos flotantes

Question

Esta pregunta ya tiene una respuesta aquí:

• Los elementos flotantes dentro de un div, flotan fuera de div. ¿Por qué? 9 respuestas

La altura de mi mainContainer no sigue el ancho de sus hijos

y aquí está mi código, ¿tiene alguna sugerencia por favor avise.

Necesito la solución CSS no JavaScript así que gracias de antemano

<div id="mainContainer">
    <div id="leftContent">

    </div>

    <div id="rightContent">

    </div>
</div>

y aqui esta mi css

#mainContainer{
    width: 1000px;
    /*height: 1000px;*/
    height:auto;
    margin-left:auto;
    margin-right:auto;
    background-color: #ff6600;
    padding-bottom: 20px;
}
#leftContent{
    height: 100px;
    float: left;
    width: 380px;
    background-color: violet;
}
#rightContent{
    height: 100px;
    float: right;
    width: 620px;
    background-color: yellow;
}

Answer 1

Añadir overflow:hidden; al contenedor:

#mainContainer{
    width: 1000px;
    /*height: 1000px;*/
    height:auto;
    margin-left:auto;
    margin-right:auto;
    background-color: #ff6600;
    padding-bottom: 20px;

    overflow: hidden; /* <--- here */
}

Debido a que su contenido es flotante, el contenedor div colapsa. Al usar una clase ''clearfix'' o, como mencioné, agregar overflow:hidden hará que el contenedor contenga los elementos flotantes.

ACTUALIZACIÓN Explicación de por qué esto funciona se puede encontrar aquí: https://stackoverflow.com/a/9193270/1588648

... y aquí:

Para que ellos (los navegadores) calculen lo que desbordó los límites del bloque (y, por lo tanto, deberían estar ocultos), tenían que saber el tamaño del bloque. Debido a que estos bloques no tienen un conjunto de altura explícito, los navegadores usaron la altura calculada del contenido.

http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

Answer 2

Desbordamiento de uso: oculta y limpia un flotador

#mainContainer{
    width: 1000px;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    background-color: #ff6600;
    padding-bottom: 20px;

    overflow: hidden;
    clear: both;
}

Answer 3

Necesita borrar sus elementos flotantes, use overflow: hidden; para #mainContainer

Demo

Alternativo: (Puede agregar clear: both; para borrar flotantes)

Demo

O también puede borrar elementos flotantes (solo si desea admitir IE9 = +

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

¿Por qué sucede esto?