无法使用伪元素清除浮动

Question

我想通过CSS伪元素来清除浮动，但是它不起作用。我做错了什么？Fiddle

HTML：

<div id="container">
    <div id="inner1"></div>
</div>
<div id="afterfloat"></div>

CSS：

#container{
    float:left;
    background: grey;
    border: 1px solid black;
}

#inner1{
    float: left;
    width: 100px;
    height: 100px;
    background: red;
    border: 1px solid black;
}

#container:after{
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

#afterfloat{
    float: left;
    width: 100px;
    height: 100px;
    background: green;
    border: 1px solid black;
}

- Dimt

---

我可以问一下你在尝试做什么吗？我的猜测是将 clear:both; 或 clear:left 添加到 #afterfloat。 - HamZa

+1 我也尝试过相同的方法。我的意思是使用伪元素清除浮动。但不起作用。 - Mr_Green

@HamZa 我正在尝试重复All About Floats中展示的解决方案。 - Dimt

你可以查看这个链接。 - Amarnath Balasubramanian

HamZa是正确的 - 你绝对不需要为此使用clearfix。 - BoltClock

Answer 1

在一个元素中使用伪类:after并不意味着“在该元素的结束标记后面”，而是会放置在该元素内所有子项之后。因此，您不能使用它来进行清除浮动。请尝试使用-。

#afterfloat {
    clear: both;
}

- Iqbal Kabir

---

那么，关于All About Floats的解决方案是什么？ - Dimt

@Dimt 确实是这样，我不知道。所以我猜你只需要 DEMO…？或者像 Iqbal 说的那样 DEMO。 - Ruddy

@Dimt 不是的。那个解决方案是针对另一种情况的。如果您的父元素具有float:none;，而子元素具有float:left或right，则父元素不会随着子元素的增长而增长。在这种情况下，您可以使用“.clearfix:after”解决方案来使父元素与子元素一起增长。 - Iqbal Kabir

:after是一个伪元素，而不是伪类。同时，我不确定你所说的“在元素中所有内部项目之后”的意思。一个单独的元素只能为自身生成一个:after伪元素。 - BoltClock

@Iqbal：“那种解决方案适用于另一种情况。”我认为这就是我的问题的答案，谢谢。 - Dimt