避免CSS浮动在层次结构中的不同级别干涉

Question

注意：为清晰起见，此处的示例标记被严格简化。我在jsfiddle上放了一个仍然简化但不太精确的版本。

我有一个双列布局，通过给予主列大的余量并将第二列浮动到其中。这两列可以包含多个框;简化的标记是

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

我现在希望把文本几段进入主箱体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"> 
     <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> 

但让我吃惊的浮动图像被强制直到最后的辅助箱子。

是否有某种方法可以将div内的浮动与其外面的浮动隔离开来？或者我将不得不将第二个盒子包装在一个div中，将主盒子包装在另一个div中，并找到一个不会浮动列的合适的双列布局？

Answer 1

说实话，我和你一样惊异 - 我不确定你的例子中发生了什么。看起来，第二个0影响第一个.fakeimg的位置 - 这对我没有任何意义，特别是因为.secondary1不影响它的ypos。

反正我没有找到一个解决 - 通过包装次级成一个额外的div（所以他们在一个适当的，完全分离箱） - 并添加浮子此包装：

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

Answer 2

尝试用div包裹.leftColumndiv S和给它：float:left; clear:left;

Demo