CSS浮动左/右明确问题：差距很大

Question

我的广告中有一个“float:right; clear:right”的css页面，而主要文本中的几个块使用“float：left”来表示像图像一样流动。问题是主文本流程箱有一个很大的差距：它们只在具有浮动的广告框之后开始显示：正确。

这是一个测试页面：http://xahlee.org/js/ex/test_float.html

我无法理解这一点。谁能解释一下？

Answer 1

我正在努力想出更好的词来解释为什么而不是“那就是它的运作方式”。

解决问题的最简单方法是将两个“广告框”放在他们自己的div float: right中：

<div style="float: right;">
    <div class="adbox1">adbox1</div>
    <div class="adbox2">adbox2</div>
</div>

Answer 2

差距是由您的明确：第二个广告框上的右侧，以及流水箱遵循文档顺序中的广告框这一事实引起的。

如果您希望在段落旁边的“流”旁边放置方框，请将它们放在您希望它们下一个浮动的段落标记之前。

Answer 3

身体边缘产生的差距;

解决方案：

body { margin: 0; }

大多数css重置工具都有此规则。