CSS浮动向左/向右清除问题:间隙过大

Question

我有一个css页面与“float:right; clear:right”的广告和几个块的主要文本是指流动的图像，使用“浮动:左”。问题是，主文本流程框有一个很大的差距:它们只在带有float:right的广告框之后才开始显示。

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

我不能理解这个。有谁能解释一下吗？

Answer 1

我正在努力想出比“这就是它的工作方式”更好的词语来解释为什么。

解决这个问题的最简单的方法是用float: right将两个“广告框”封装在各自的div中

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

Answer 2

造成这种差距的原因是您在第二个adbox上的clear: right，以及在文档顺序中follow跟随adbox的事实。

如果你想让框在段落旁边的底部“流动”，把它们放在你想让它们浮动的段落标签之前。

Answer 3

身体边缘产生的间隙；

解决方案：

body { margin: 0; }

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