階層内の異なるレベルのCSS浮動小数点を避ける

Question

注：わかりやすくするために、ここでのサンプルマークアップは大幅に簡略化されています。私はjsfiddleにまだ簡略化されていますが、あまりバージョンはありません。

私は、プライマリ列に大きなマージンを与え、セカンダリ列をその中に浮かべることで動作する2列レイアウトを持っています。どちらの列も複数のボックスを含むことができます。

<div style="width:940px"> 
    <div style="float:left; width:282px">Secondary box A</div> 
    <div style="float:left; width:282px">Secondary box B</div> 
    <div style="margin-left:320px; width:602px"> 
     <img style="width:215px; height:180px; float:right" ... /> 
     <p>Lorem ipsum dolor sit amet</p> 
    </div> 
    <div style="margin-left:320px; width:602px">Primary box B</div> 
</div> 

しかし、私の驚きに浮遊画像は、強制されている：単純化されたマークアップは、私は今、それが正しい浮動、主要ボックスAと、画像にテキストのいくつかの段落を入れたい

<div style="width:940px"> 
    <div style="float:left; width:282px">Secondary box A</div> 
    <div style="float:left; width:282px">Secondary box B</div> 
    <div style="margin-left:320px; width:602px">Primary box A</div> 
    <div style="margin-left:320px; width:602px">Primary box B</div> 
</div> 

です最後のセカンダリボックスに移動します。

div内の浮動小数点数を浮動小数点数の外の浮動小数点数から切り離す方法はありますか？あるいは、ある部門の二次ボックスと別の部門の二次ボックスを包んで、その列を浮かせない適切な2列レイアウトを見つける必要がありますか？

Answer 1

あなたに真実を伝えるために、私はあなたのように印象づけられました。あなたの例で何が起きているのか分かりません。 .secondary0は最初の.fakeimgのyposに影響を与えているように見えます。特に、.secondary1はyposに影響を与えないので、意味がありません。 （そう、彼らは正しい、完全に分離ボックス内にある）余分なdiv要素の中にセカンダリをラップすることによって - -

はとにかく、私は修正を見つけたし、このラッパーにフロートを追加しました：

http://jsfiddle.net/9HLXK/8/

Answer 2

float:left; clear:left;

Demo