Question

我有一个带有页脚的对话框，有时会重叠前面的内容，具体取决于内容。内容具有浮动，宽度，溢出和填充样式的混合。以下是该问题的简化版本。

这是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的类从“broken”更改为“fixed”，那么它看起来就像预期的那样。这些样式之间的唯一区别是宽度以px或％指定。如果我删除div #tricky，也会出现问题。

我已将它作为fiddle提供。有一个切换按钮可以快速查看不同风格的效果。

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

Answer 1

你需要清除浮子。我喜欢使用clearfix。

将此添加到您的css：

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

然后给课程＆＃39; clearfix＆＃39;到您浮动的元素的父元素。在这种情况下，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/

Answer 2

由于您的CSS之前有float:left，因此您需要为页脚添加一些样式

<div class="footer" style="background: yellow">Footer</div>
.footer
{
    clear:both;
}

Answer 3

问题是由浮动：左侧描述引起的，如果删除它，上面的内容将不会重叠。另外要设置宽度：100％和float：left组合不是很好。

为什么这个页脚重叠上面的内容

3 个答案: