html - 为什么此页脚与上面的内容重叠

我有一个带有页脚的对话框，根据内容的不同，有时还会与前面的内容重叠。内容具有浮点，宽度，溢出和填充样式的混合。
以下是该问题的摘要。

这是HTML：

<div style="padding:5px">
  <div class="description">AAAAAAAAAAAAAAA</div>
  <div class="description">BBBBBBBBBBBBBBB</div>
  <div class="description">CCCCCCCCCCCCC</div>
</div>
<div id="tricky" class="broken"></div>
<div style="background: yellow">Footer</div>

和样式：

.description {
    float: left;
    width: 100%;
}

.broken {
    overflow: auto;
    width: 5px;
}

.fixed {
    overflow: auto;
    width: 5%;
}

预期结果将只有页脚黄色。由于某种原因，“描述” div也为黄色。如果我将#tricky的类别从“损坏”更改为“固定”，则它看起来像预期的那样。这些样式之间的唯一区别是宽度以px或％指定。
如果删除div #tricky，也会出现此问题。

我也将其作为fiddle提供。有一个切换按钮可以快速查看不同样式的效果。

请帮助我理解为什么这些样式会使页脚扩展。

最佳答案

您需要清除浮标。我喜欢使用clearfix。

将此添加到您的CSS：

.clearfix:after {
content: "";
display: table;
clear: both;

然后将“ clearfix”类赋予您浮动的元素的父元素。在这种情况下，firt如下所示：

<div class="clearfix" style="padding:5px">
    <div class="description">AAAAAAAAAAAAAAA</div>
    <div class="description">BBBBBBBBBBBBBBB</div>
    <div class="description">CCCCCCCCCCCCC</div>
</div>

每当您漂浮某物时，Clearfix是简单/良好的实践。您可以在这里阅读有关内容：http://css-tricks.com/snippets/css/clear-fix/

关于html - 为什么此页脚与上面的内容重叠，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28279474/