Question

我有一些HTML元素，它们有背景色。我现在添加了一个浮动元素，我的背景已经消失了。我理解为什么，而且我知道如何解决它（它非常清楚stackoverflow.com/questions/211383/which-method-of-clearfix-is-best/1633170）但我的布局略有不同。

<footer>
<div></div>
<div></div>
<p>Words<br /> And more words</p>
</footer>

CSS

footer {
    background:#ccc;
}

footer p { 
    text-align:center;
    float:right;
}

footer:after {
    content:'';
    display:table;
    clear: both;
}

JSFiddle

为什么这样做？我没有在页脚之后清除任何内容！

Answer 1

您可以设置overflow：auto for footer。

footer { 
  background: #ccc;
  overflow: auto;
}

那会抓住花车。

http://jsfiddle.net/EyNnk/254/

<强>更新

如果您使用开发人员工具检查HTML输出，则可以看到：

footer > p:after { content: ''; clear: both; }

产生以下结构：

<p>Words<br> And more words::after</p>

这表明，伪元素:: after是在内部，而不是在其后面。这就是为什么你的代码不起作用，你正在清除p-tag内的所有浮点数。

所以问题的解决方案是：

footer:after { content: ''; clear: both; }

其中包括::在页脚之后，清除所有花车内部你的页脚。

Answer 2

您应该将伪元素附加到页脚本身而不是footer :after之后的<{1}}后面，例如<p>元素（footer p:after）：

<强> Updated Demo

footer:after {
    content: "";
    display: table;
    clear: both;
}

这会创建一个伪元素作为footer的最后一个孩子，它会清除浮动。

同样，footer :after相当于footer *:after，它将:after伪元素添加到footer的所有后代，而非{{1}}元素本身。

Answer 3

footer p:after {

:after在元素内容之后插入。所以在标记结束之前clear的内容之后，它意味着p。

所以，你想使用

footer:after {

在关闭footer之前清除。

为什么我清楚：使用CSS选择器时都不起作用

3 个答案: