关于clearfix实际工作方式的困惑 [英] Confusion as to how clearfix actually works

问题描述

当容器元素中有一个浮动元素时，您需要将容器设置为溢出自动或添加一个清除两者浮动元素之后。

When you have a floating element inside a container element you are required to either set the container to overflow auto or add a clear both after the floated element.

这很有意义，因为您正在容器中清除浮动元素。

This makes sense as you are clearing the floated elements WITHIN the container.

但是，当使用 clearfix CSS技巧时，您是在容器之后进行清除，而不是在浮动元素之后进行清除...我很困惑这是如何工作的您现在正在清理容器，而不是浮子，所以它肯定仍会导致容器具有躲避高度，对吗？因为如果我将都清除了在具有物理元素的容器之后将不起作用，那么为什么它与一起使用：为什么 ??

However when using the clearfix CSS trick you are doing the clear after the container and NOT after the floated elements... I'm confused how this is working as you are now clearing the container and not the floats so it should surely still cause the container to have a dodgy height right? Because if I put the clear both AFTER the container with a physical element it would not work so why does it work with the :after ??

有人能解释吗？谢谢

示例：

<div style="border:#000 1px solid;padding:10px;">
    <div style="width:100px;height:100px;background:blue;float:left;"></div>
</div>
<div style="clear:both;"></div>

这行不通，但这不是clearfix实际上可以做什么吗？

This would not work work but isn't that what the clearfix virtually does?

推荐答案

CSS ：after 伪元素的意思是在元素内容之后，但仍在元素内部，而不是在元素本身之后。这就是它起作用的原因。

The CSS :after pseudoelement means "after the element's content, but still inside an element", not "after the element itself". This is why it works.

这篇关于关于clearfix实际工作方式的困惑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！