css - <div> 以意外的高度呈现，并在为空时破坏布局

Question

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

在我检查 <div id="foot"> 之前，布局似乎一切正常(页脚)，我意识到它的高度是整个页面，我原以为它只是它的内容的大小。

查看here (code)。

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

查看here (code)。

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

查看here (code)。

我不确定为什么要删除 #foot弄乱了其他内容，我不确定为什么 #foot正在呈现一个高度(到页面顶部)。

Answer 1

我现在明白你的问题了。你有一个 float ，但 foot div 没有清除它。

你需要添加...

clear: both;

……或者……

clear: left;

...到 #foot CSS 以清除其上方的左侧 float 。否则内容将环绕您的页脚。

这是对您的 jsFiddle 的更新, 显示脚在正确的位置。

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