clearfix类在css中做了什么？

Question

我看过div标签clearfix在孩子divs使用该float属性时使用了一个类.clearfix类如下所示:

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

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

谢谢,G

Answer 1

漂浮如何工作

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

float VS display:inline

在发明之前display:inline-block,网站使用float彼此相邻的元素.float优于display:inline由于与后者,则可以不设置元件的尺寸(宽度和高度)以及垂直填补处理(顶部和底部) -这浮动元素可以做,因为他们正在为块元素对待.

漂浮问题

主要问题是我们正在使用float它的预期目的.

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

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

Clearfix救援

什么clearfix确实很给力浮筒或含彩车来呈现它下面的容器后的内容.clear-fix有很多版本,但它的名字来自通常使用的版本 - 使用CSS属性的版本clear.

例子

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

你有什么

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

• 第一个clearfix你clear:both在目标元素和下一个元素之间追加一个不可见的伪元素.这会强制伪元素渲染到目标下方,并强制伪元素下面的下一个元素.

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

• 这是display:block由于上面的IE-MAC规则的重新应用.这个规则是从IE-MAC"隐藏"的.

总而言之,这三条规则保留了.clearfix可操作的跨浏览器,并考虑了旧浏览器.

Answer 2

当一个元素(如a div)floated,其父容器不再考虑其高度时,即

<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

Answer 3

clearfix是一样的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'方法？