避免 CSS 浮动在层次结构中的不同级别上造成干扰
注意：为了清晰起见，此处的示例标记已被大大简化。我在 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 中，并找到一种合适的两列布局，该布局不会使列浮动？
Note: the sample markup here is grossly simplified for clarity. I've put a still simplified but less so version on jsfiddle.
I have a two-column layout which works by giving the primary column a large margin and floating the secondary column into it. Both columns can contain multiple boxes; the simplified markup is
<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>
I now want to put a few paragraphs of text into primary box A and an image, floating it right:
<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>
But to my surprise the floating image is being forced down to the final secondary box.
Is there some way to isolate the floats inside the div from the floats outside it? Or am I going to have to wrap the secondary boxes in one div and the primary boxes in another and find a suitable two-column layout which doesn't float the columns?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
尝试用
div包装.leftColumndiv并给出：float:left; clear:left;演示
Try wrapping the
.leftColumndivs with adivand giving it:float:left; clear:left;Demo
说实话，我和你一样感到惊讶 - 而且我不确定你的例子中发生了什么。看来 . secondary0 正在影响第一个 .fakeimg 的 ypos - 这对我来说没有任何意义，特别是因为 . secondary1 不影响其 ypos 。
不管怎样，我确实找到了一个解决方案 - 通过将辅助对象包装到一个额外的 div 中（这样它们就在一个正确的、完全分离的盒子中） - 并将浮动添加到这个包装器中：
http://jsfiddle.net/9HLXK/8/
To tell you the truth, I was as surprized as you were - and I'm not sure what is happening in your example. It appears that .secondary0 is affecting the ypos of the first .fakeimg - which doesn't make any sense to me, especially since .secondary1 does not affect its ypos.
Anyway, I did find a fix - by wrapping the secondaries into an extra div (so they are in a proper, completely separated box) - and added the float to this wrapper:
http://jsfiddle.net/9HLXK/8/