CSS child clearing parent float

Question

Tengo un diseño de dos columnas, barra lateral a la izquierda, contenido a la derecha.

Por lo tanto, hago flotar la barra lateral izquierda y le doy un margen al contenido de la derecha. Todo está bien y bien ...

Hasta que un elemento secundario del contenido tiene una clara aplicada a él, salta debajo de la barra lateral.

¿Hay alguna manera de hacer que los elementos de los niños floten y queden limpios dentro de su contenedor principal?

Como una imagen vale más que 1000 palabras, aquí hay un jsFiddle:

http://jsfiddle.net/qRYYm/1/

Answer 1

Si agrega overflow:auto;-.content que debe ver tienes razon.

Answer 2

Qué tal esto:

aside{ 
    position: absolute; 
    height: 300px; 
    width: 100px; 
} 

http://jsfiddle.net/qRYYm/2/

Answer 3

Debe evitar el uso de borrar. Puede utilizar overflow: hidden con contenedor principal

<div class="content"> 
    <div class="one">One</div> 
    <div class="two">Two</div>  
</div> 

.content { float: left; overflow: hidden; width: 900px; } 
aside { float: left; width: 100px; } 

Además, no se debe utilizar el margen izquierdo: 100px para empujar el contenido fuera de la columna de la izquierda. Flota ambos a la izquierda. Encuentro que a las columnas les gusta estar en un contenedor principal. Es más acogedor de esa manera.

Answer 4

Puede hacerlo de esta manera también.

.left{float:left;} 
.right {float:right;} 
.clear{clear:both;} 

<div> 
    <div class="left">SideBar</div> 
    <div class="right"> 
      <div> 
       <div class="left">content 1</div> 
       <div class="left">content 2</div> 
       <div class="clear"></div> 
      </div> 
    </div> 
    <div class="clear"></div> 
</div> 

Al aplicar flotador en cualquier div (s), ponerlos en un div padre y claro en el div mismo padre