html - 親フロートをクリアする CSS 子

Question

左側にサイドバー、右側にコンテンツがある 2 列のレイアウトがあります。

そこで、サイドバーを左にフロートさせ、右のコンテンツに余白を与えます。万事順調で…

コンテンツの子要素にクリアが適用されるまで、サイドバーの下にジャンプします。

親コンテナ内でのみ子要素を浮き上がらせてクリアする方法はありますか?

画像は 1000 語に相当するため、JSFiddle を次に示します。

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

Answer 1

それに追加すれば、overflow:auto;あなた.contentは正しいと思うはずです。

Answer 2

この方法でもできます。

.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 に float を適用する場合は、それらを親 div に配置し、同じ親 div 内でクリアします

Answer 3

これはどうですか：

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

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

Answer 4

clear の使用は避けてください。メインコンテナでoverflow:hiddenを使用できます

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

また、margin-left:100px を使用して、左側の列からコンテンツを押し出すべきではありません。両方とも左に浮かせます。列がメインラッパーにあるのが好きだと思います。その方が居心地がいい。