html - clearfix类在css中做了什么?

这个问题在这里已有答案:

  • 什么是clearfix?                                     10个答案

我看过div标签使用了clearfix类,当它的孩子bottom-border使用divs属性。 clearfix类如下所示:

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

我发现如果我在使用bottom-border属性时不使用clearfix,则边框将显示在子项divs上方。有人可以解释一下clearfix类的作用吗? 另外,为什么有两个display属性? 这对我来说似乎很奇怪。 我对content:'.'的含义特别好奇。

谢谢,G

Gnijuohz asked 2019-09-10T22:20:37Z
3个解决方案
122 votes

漂浮如何工作

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

.clearfix vs position:absolute

.clearfix发明之前,网站使用position:absolute来设置彼此相邻的元素。 <div>优于<div>,因为对于后者,您不能设置元素的尺寸(宽度和高度)以及垂直填充(顶部和底部) - 浮动元素可以执行这些操作,因为它们被视为块元素。

漂浮问题

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

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

.clearfix不同,它会影响它周围的内容。 浮动元素之后的内容将“包裹”在元素周围。 它首先在它旁边渲染然后在它下面,就像报纸文本在图像周围流动一样。

Clearfix救援

clearfix的作用是在浮点数或包含浮点数的容器在其下方渲染之后强制内容。 有很多版本用于clear-fix,但它的名字来自通常使用的版本 - 使用CSS属性的版本.clearfix

例子

这里有几种方法可以做clearfix,具体取决于浏览器和用例。 只需要知道如何在CSS中使用.clearfix属性以及如何在每个浏览器中呈现浮点数,以实现完美的跨浏览器清除修复。

你有什么

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

  • 第一个clearfix你在目标元素和下一个元素之间附加了一个不可见的伪元素,它的样式为.clearfix。 这会强制伪元素渲染到目标下方,并强制伪元素下面的下一个元素。

  • 第二个附加了早期浏览器不支持的样式.clearfix。 内联块就像内联,但为您提供了一些阻止元素的属性,如宽度,高度以及垂直填充。 这是针对IE-MAC的。

  • 由于上面的IE-MAC规则,这是.clearfix的重新应用。 这个规则是从IE-MAC“隐藏”的。

总而言之,这三条规则使得.clearfix可以跨浏览器工作,并考虑到旧的浏览器。

Joseph answered 2019-09-10T22:22:43Z
18 votes

当某个元素(如div)为clearfix时,其父容器不再考虑其高度,即

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

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

因此,各种框架使用的clearfix类通过使父容器“确认”包含的元素来修复此问题。

每天,我通常只使用960gs,Twitter Bootstrap这样的框架进行布局,而不是使用精确的机制。

可以在这里阅读更多

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

Damon Aw answered 2019-09-10T22:23:44Z
6 votes

"."overflow:hidden相同。父母的两个明确浮动子,但clearfix不会切断溢出到它的元素parent。它也适用于IE8及以上版本。

无需在内容&.clearfix中定义"."。 就像这样写:

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

HTML

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

阅读这些链接了解更多信息

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

我可以使用哪种'clearfix'方法?

sandeep answered 2019-09-10T22:24:38Z
translate from https://stackoverflow.com:/questions/9543541/what-does-the-clearfix-class-do-in-css