<div>呈现意外高度，并在空</div>时中断布局

Question

上下文：这是我正在处理的wordpress主题的输出html。

在我检查<div id="foot">（页脚）之前，一切看起来都很好，我意识到它的高度是整个页面，我期待它只是它内容的大小。

见here（code）。

试图调试这个问题，我意识到如果我删除了div的内容或删除了div，它会破坏其余的设计，为什么会这样？

见here（code）。

我期待页脚（<div id="foot">）是其内容的高度，如果我在#foot之后添加另一个div，这似乎工作正常：

见here（code）。

我不确定为什么删除#foot会混淆其他内容，我不确定为什么#foot会以高度呈现（到页面顶部）。

Answer 1

我现在明白你的问题。你有一个浮动，但脚div不会清除它。

您需要添加...

clear: both;

...或...

clear: left;

...到#foot CSS清除它上面的浮动。否则，内容将环绕您的页脚。

以下是jsFiddle的更新，显示脚部处于正确位置。

旁注，我相信你还没有关闭所有div元素。

Answer 2

好了，现在我得到了你实际问的内容，我希望其他人澄清你实际上在问什么，这是floats的问题，我改变了背景，我意识到实际的是什么这里

Demo

Solved Demo

只需在footer div上方添加此行以清除浮动，只需使用红色显示差异

<div style="clear: both;"></div>
  <div id="foot">
    footer
  </div>