CSSの子は、私は2列のレイアウト、左側のサイドバー、右側のコンテンツを持つ親フロート

Question

をクリアします。

だから私は左のサイドバーをフロート、右側のコンテンツに余裕を与えます。すべてはそれがサイドバーの下にジャンプし、コンテンツの子要素がそれに適用される明確なを持っている、まで...

結構ですし、うまく。

それは親コンテナの中に子要素のみが浮くようにする方法とクリアはありますか？

絵は千個の言葉の価値があるように、ここでJSFiddleです：これについて

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

Answer 1

あなたが表示されるはずです.contentにoverflow:auto;を追加した場合その通り。

Answer 2

何：

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

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

Answer 3

あなたは明確な使用を避けるべきです。離れた左側の列から、コンテンツをプッシュするために100pxに：あなたは余裕左を使用してはならない、また、本体容器に隠された

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

：あなたはオーバーフローを使用することができます。両方のフロート。私は、列がメインラッパーになるのが好きだと分かります。それはそんなにコザイです。

Answer 4

あなたは、この方法でも、それを行うことができます。任意のdiv要素（複数可）にフロートを適用する場合

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

、親divの中にそれらを入れて、同じ親のdiv