<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
html - CSS Clearfix 无法正常工作，即使在元素之后
我有一个 clearfix，它被添加到具有类名 group 的任何元素
在下面的截图中你可以看到两件事
- 在右下角，您会看到 clearfix 已成功添加到 flash div，因为创建了一个
after元素。 - 您看到标题
New post清楚地移动到 flash message div 的右侧。为了更清楚，我用红色标出了 flash div 的边距
div.alert {
width: 10rem;
margin: 3rem;
float: left;
border: 2px solid #444;
border-radius: 4px;
padding: 0.5rem 1rem;
}
编辑； 由于我没有明确说明，我希望了解为什么 clearfix 没有跨越父容器的整个宽度。 与此同时，Pete 已经给了我一个令人满意的答案，那就是我应该将 clearfix 添加到父容器中，而不是添加到 float flash 元素本身。
最佳答案
我认为您错过了 :after 的要点。它会将内容放在指定元素的末尾(而不是在它之后)，因此使用 :after 清除 float 元素本身的 float 不会清除它，因为清除将放在里面那个元素。
要解决这个问题，可以将 clear:left 添加到新的 post div 样式中，或者将 flash div 包装在一个元素中，并对其进行明确修复
关于html - CSS Clearfix 无法正常工作，即使在元素之后，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31701562/