Html 用伪类替换clear:both

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

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

我一直工作得很好。但是今天。。。它不工作！ 看看这个清晰的例子：

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

---

非常感谢大家

当然-您可以通过

：在
clearfix之后清除它，但是最理想、最轻量级的解决方案就是在父级上设置
溢出：隐藏
，以更少的编码实现所需的效果

#mention {
    overflow: hidden;
}


但是，要直接回答这个问题，您应该将
：after
clearfix应用于
#提及的
-父对象，而不是子对象。。它是有效的。
我想你需要一个提醒：以后再做你想做的事

例如，

#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; }


希望这能有所帮助。
如果您只需在id
中添加
：之后添加
，
，您将获得所需的效果

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

这就是你想要的吗？谢谢Josh，结果非常完美！在这种情况下，JoshC的解决方案似乎更加轻量级，但我保留您的解决方案以满足进一步的需要：）没问题！溢出是实现这一点的最基本和最广泛使用的方法。我相信绝对元素也可以使用
overflow:auto
。
overflow:hidden
对老IE来说是最好的答案，对吧？谢谢！没错，在这种情况下，溢出实际上比伪类更轻：）不。真正的跨浏览器兼容性的答案：）-@jawad但检查我的小提琴，并实际操作以获得确认。+1-@Jawadcool@Nathan Lee的Thx+我想回答你的问题。你只能做三件事。Clearfix@extra markup，Overflow:auto@不支持旧浏览器，我忘记了第三个。我建议为实现完全的浏览器兼容性而进行一些额外的标记是一种理想的方法。-@是的，但是语义网的狂热者总是有很好的理由反对它。但你真正的问题是，为什么它在你的情况下不起作用？
#mention:after {
  content: "";
  display: table;
  clear: both;
}