CSS Kind Clearing Eltern Float

Question

Ich habe ein zweispaltiges Layout, Sidebar auf der linken Seite, Inhalt auf der rechten Seite.

Also ich schwebe die Seitenleiste links, und gebe dem Inhalt rechts einen Rand. Alles ist gut und gut ...

Bis, ein Kind Element des Inhalts hat eine klare angewendet, es springt unter der Seitenleiste.

Gibt es eine Möglichkeit, Kinderelement nur innerhalb des übergeordneten Containers freizugeben und zu löschen?

Als Bild ist 1000 Worte wert, hier ist ein JSFiddle:

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

Answer 1

Wenn Sie overflow:auto;-.content hinzufügen, dass sehen soll Du hast recht.

Answer 2

Was dazu:

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

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

Answer 3

Sie sollten vermeiden, klar zu verwenden. Sie können Überlauf verwenden: versteckt mit Hauptbehälter

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

Außerdem sollen Sie nicht verwenden, um den margin-left: 100px den Inhalt weg von der linken Spalte zu schieben. Float beide nach links. Ich finde, dass die Spalten in einer Hauptverpackung sind. Es ist so gemütlicher.

Answer 4

Sie können es auch so tun.

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

Wenn auf jedem div float Anwendung (en), legt sie in einem übergeordneten div und klar innerhalb derselben Mutter div