clearfix类在css中做什么？ [英] What does the clearfix class do in css?

问题描述

我看到 div 标签在 divs 时使用 clearfix / code>使用 float 属性。 clearfix类看起来像这样：

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

我发现如果我不使用 clearfix 当底部边界属性时，边框将显示在 divs 。有人可以解释clearfix类做什么？此外，为什么有两个显示属性？这对我来说似乎很奇怪。我特别好奇 content：'。'的意思。

谢谢，G

解决方案

浮动的工作原理

当页面上存在浮动元素时，非浮动元素环绕浮动元素，类似于文章在报纸上的图片。从文档的角度（HTML的原始目的），这是浮动的工作原理。

float vs display：inline

<块，网站使用 float 将元素放在彼此旁边。 float 比 display：inline 优先，因为后者不能设置元素的尺寸）以及垂直填充（顶部和底部） - 这些浮动元素可以做，因为它们被当作块元素。

浮动问题

主要的问题是我们使用 float 来达到预期目的。

另一个是， float 允许并排的块级元素， float不会赋予其容器形状。它就像 position：absolute ，其中的元素是从布局中取出。例如，当空容器包含浮动的100px x 100像素< div> 时，< div>

与 position：absolute 不同，它会影响其周围的内容。浮动元素之后的内容将环绕元素。

清除修补程序

什么 clearfix 是强制内容后的浮动或包含浮动的容器下面呈现。有很多版本的clear-fix，但它的名称从通常使用的版本 - 使用CSS属性清除。

示例

以下是几种方法做clearfix ，取决于浏览器和用例。只需要知道如何使用CSS中的 clear 属性，以及如何在每个浏览器中渲染浮动，以实现完美的跨浏览器清除。

您有什么

您提供的样式是一种具有向后兼容性的clearfix。 我发现了一篇关于此漏洞的文章。事实证明，它是一个OLD clearfix - 仍然适应旧的浏览器。在文章中还有一个新的，更干净的版本。下面是细分：

• 您添加的第一个修补程序附加了一个不可见的伪元素，样式为清除：两个，在目标元素和下一个元素之间。




• 第二个附加样式 display：inline-block ，这是早期浏览器不支持的。 inline-block类似于inline，但是给你一些阻塞元素的属性，如宽度，高度以及垂直填充。这是针对IE-MAC。




• 这是由于IE的重新应用 display：block -MAC规则。此规则从IE-MAC隐藏。

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

I've seen div tags use a clearfix class when it's child divs use the float property. The clearfix class looks like this:

.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 clearfix when I use the bottom-border property, the border would show above the child divs. Can someone explain what the clearfix class does? Also, why are there two display properties? That seems very strange to me. I am especially curious about what the content:'.' means.

Thanks,G

解决方案

How floats work

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

float vs display:inline

Before the invention of display:inline-block, websites use float to set elements beside each other. float is preferred over display:inline since 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.

Float problems

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

Another is that while float allows 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.

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.

Clearfix to the rescue

What clearfix does 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.

Examples

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

What you have

Your provided style is a form of clearfix with backwards compatibility. I found an article about 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:

• 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-block which 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:block due to IE-MAC rule above. This rule was "hidden" from IE-MAC.

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

这篇关于clearfix类在css中做什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！