Html clearfix 类在 css 中有什么作用？

What does the clearfix class do in css?

提问by Gnijuohz

I've seen divtags use a clearfixclass when it's child divsuse the floatproperty. The clearfix class looks like this:

我见过div标签clearfix在孩子divs使用float属性时使用类。clearfix 类如下所示：

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}
.clearfix {
    display: block;
}

I found that if I don't use clearfixwhen I use the bottom-borderproperty, the border would show above the child divs. Can someone explain what the clearfix class does? Also, why are there two displayproperties? That seems very strange to me. I am especially curious about what the content:'.'means.

我发现如果我clearfix在使用bottom-border属性时不使用，边框会显示在 child 上方divs。有人可以解释 clearfix 类的作用吗？另外，为什么有两个display属性？这对我来说似乎很奇怪。我特别好奇这content:'.'意味着什么。

Thanks,G

谢谢，G

回答by Joseph

How floats work

浮动的工作原理

When floating elements exist on the page, non-floating elements wrap aroundthe floating elements, similar to how text goes around a picture in a newspaper. From a document perspective (the original purposeof HTML), this is how floats work.

当页面上存在浮动元素时，非浮动元素会环绕浮动元素，类似于文本围绕报纸图片的方式。从文档的角度（HTML的最初目的）来看，这就是浮动的工作方式。

floatvs display:inline

float对比 display:inline

Before the invention of display:inline-block, websites use floatto set elements beside each other. floatis preferred over display:inlinesince with the latter, you can't set the element's dimensions (width and height) as well as vertical paddings (top and bottom) - which floated elements can do since they're treated as block elements.

在 发明之前display:inline-block，网站使用float将元素设置为彼此相邻。float优先于display:inline后者，因为对于后者，您不能设置元素的尺寸（宽度和高度）以及垂直填充（顶部和底部）-浮动元素可以这样做，因为它们被视为块元素。

Float problems

浮动问题

The main problem is that we're using floatagainst its intended purpose.

主要问题是我们的使用float违背了它的预期目的。

Another is that while floatallows side-by-side block-level elements, floats do not impart shape to its container. It's like position:absolute, where the element is "taken out of the layout". For instance, when an empty container contains a floating 100px x 100px <div>, the <div>will not impart 100px in height to the container.

另一个是虽然float允许并排的块级元素，但浮动不会为其容器赋予形状。就像position:absolute，元素被“从布局中取出”。例如，当一个空容器包含一个浮动的 100px x 100px 时<div>，<div>不会将 100px 的高度传递给容器。

Unlike position:absolute, it affects the content that surrounds it. Content after the floated element will "wrap" around the element. It starts by rendering beside it and then below it, like how newspaper text would flow around an image.

与 不同position:absolute，它会影响它周围的内容。浮动元素之后的内容将“环绕”元素。它首先在它旁边渲染，然后在它下面渲染，就像报纸文本如何围绕图像流动一样。

Clearfix to the rescue

Clearfix 来救援

What clearfixdoes is to force content after the floats or the container containing the floats to render below it. There are a lot of versions for clear-fix, but it got its name from the version that's commonly being used - the one that uses the CSS property clear.

什么clearfix确实是彩车或含彩车来呈现它下面的容器后力的内容。clear-fix 有很多版本，但它的名字来源于常用的版本——使用 CSS 属性的版本clear。

Examples

例子

Here are several ways to do clearfix, depending on the browser and use case. One only needs to know how to use the clearproperty in CSS and how floats render in each browser in order to achieve a perfect cross-browser clear-fix.

以下是执行 clearfix 的几种方法，具体取决于浏览器和用例。只需要知道如何clear在 CSS 中使用该属性以及浮动在每个浏览器中如何呈现，即可实现完美的跨浏览器清除修复。

What you have

你有什么

Your provided style is a form of clearfix with backwards compatibility. I found an articleabout this clearfix. It turns out, it's an OLD clearfix - still catering the old browsers. There is a newer, cleaner version of it in the article also. Here's the breakdown:

您提供的样式是一种具有向后兼容性的 clearfix 形式。我找到了一篇关于这个 clearfix的文章。事实证明，这是一个旧的 clearfix - 仍然迎合旧的浏览器。文章中还有一个更新、更简洁的版本。这是细分：

• The first clearfix you have appends an invisible pseudo-element, which is styled clear:both, between the target element and the next element. This forces the pseudo-element to render below the target, and the next element below the pseudo-element.

• The second one appends the style display:inline-blockwhich is not supported by earlier browsers. inline-block is like inline but gives you some properties that block elements, like width, height as well as vertical padding. This was targeted for IE-MAC.

• This was the reapplication of display:blockdue to IE-MAC rule above. This rule was "hidden" from IE-MAC.

• 您拥有的第一个 clearfixclear:both在目标元素和下一个元素之间附加了一个不可见的伪元素，它是 styled 。这会强制伪元素呈现在目标下方，以及伪元素下方的下一个元素。

• 第二个附加了display:inline-block早期浏览器不支持的样式。inline-block 类似于 inline，但为您提供了一些阻止元素的属性，例如宽度、高度以及垂直填充。这是针对 IE-MAC 的。

• 这是display:block由于上述 IE-MAC 规则的重新应用。此规则对 IE-MAC 是“隐藏的”。

All in all, these 3 rules keep the .clearfixworking cross-browser, with old browsers in mind.

总而言之，这 3 条规则保持了.clearfix跨浏览器的工作，并考虑到了旧浏览器。

回答by Damon Aw

When an element, such as a divis floated, its parent container no longer considers its height, i.e.

当一个元素，比如 a divis floated，它的父容器不再考虑它的高度，即

<div id="main">
  <div id="child" style="float:left;height:40px;"> Hi</div>
</div>

The parent container will not be be 40 pixels tall by default. This causes a lot of weird little quirks if you're using these containers to structure layout.

默认情况下，父容器不会是 40 像素高。如果您使用这些容器来构建布局，这会导致许多奇怪的小怪癖。

So the clearfixclass that various frameworks use fixes this problem by making the parent container "acknowledge" the contained elements.

所以clearfix各种框架使用的类通过让父容器“确认”所包含的元素来解决这个问题。

Day to day, I normally just use frameworks such as 960gs, Twitter Bootstrap for laying out and not bothering with the exact mechanics.

日复一日，我通常只使用 960gs、Twitter Bootstrap 等框架来进行布局，而不会为确切的机制而烦恼。

Can read more here

可以在这里阅读更多

http://www.webtoolkit.info/css-clearfix.html

http://www.webtoolkit.info/css-clearfix.html

回答by sandeep

clearfixis the same as overflow:hidden. Both clear floated children of the parent, but clearfixwill not cut off the element which overflow to it's parent. It also works in IE8 & above.

clearfix与 相同overflow:hidden。两者都清除父项的浮动子项，但clearfix不会切断溢出到它的元素parent。它也适用于 IE8 及更高版本。

There is no need to define "."in content & .clearfix. Just write like this:

无需"."在 content & .clearfix 中定义。就这样写：

.clr:after {
    clear: both;
    content: "";
    display: block;
}

HTML

HTML

<div class="parent clr"></div>

Read these links for more

阅读这些链接了解更多

http://css-tricks.com/snippets/css/clear-fix/,

http://css-tricks.com/snippets/css/clear-fix/,

What methods of ‘clearfix' can I use?

我可以使用哪些“clearfix”方法？