Question

以前，当我有浮动块时，我会停止浮动，我使用;

<div style="clear:both"></div>

但是现在，我用伪类解决了这个问题：

.last_floating_div:after {
 content: ""; 
 display: table;
 clear: both;
}

我一直都很完美。但今天......它不起作用......！看看这个明确的例子：http://jsfiddle.net/YsueS/2/

我知道我的问题是一个初学者问题。我已经卖了很多次这个问题......我真的不明白为什么它在这里不起作用！

非常感谢你们所有人！

Answer 1

当然 - 您可以通过:after clearfix清除它，但最佳，轻量级的解决方案只是在父级上设置overflow:hidden，以更少的编码实现所需的效果。

#mention {
    overflow: hidden;
}

jsFiddle here

要直接回答这个问题，您应该将:after clearfix应用于#mentions - 父级，而不是孩子。jsFiddle here它可以运作。

Answer 2

我认为你需要一个#mention：之后做你正在寻找的事情。

对于实例，

#mention:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
#mention { display: inline-block; }

* html #mention{ height: 1%; } /* for older ie */
#mention { display: block; }

<强> WORKING DEMO

希望这有帮助。

Answer 3

如果您只是将:after添加到ID mention，您将获得所需的效果。

#mention:after {
  content: "";
  display: table;
  clear: both;
}

JSFIDDLE

替换clear：都是伪类

3 个答案: