clearfix是如何工作的？

Question

我正在克隆一个网站的主页，当我跟踪和复制他们的代码时，我看到我的垂直滚动条翻了一番(当我到达容器部分时)。我正在努力寻找如何摆脱这个，有些人说，你必须将身体的高度固定到100%或简单地放在overflow-y:隐藏，是的，它工作了，但我现在的另一个问题是，下面的一些内容丢失了。如果另一个垂直滚动条在那里，它就会出现，我认为它与"clearfix“的事情有关，但我仍然不明白它是如何工作的。请帮我摆脱这个，我仍然是一个实习生，我仍然不知道css3或任何这是什么，网站克隆是我的项目之一。谢谢!

Answer 1

"Clearfix“hack是应用于父元素的CSS规则的集合，强制该元素扩展以包含任何子元素，包括那些已被”浮动“的元素。

在正常情况下，“浮动”元素会导致包含元素的父元素折叠为只包含非浮动内容。"Clearfix“黑客阻止了这一点。

有关clearfix的更多信息，请访问：http://css-tricks.com/snippets/css/clear-fix/

...and浮动：http://css-tricks.com/all-about-floats/

Answer 2

Clearfix只是用来设置容器的高度，它将有一个设置了position属性的子元素。

属性使元素浮动在文档中的其他元素上。因此，在这些情况下使用clearfix，以便相应地设置父对象的高度和高度。

点击此处了解更多信息：http://css-tricks.com/snippets/css/clear-fix/

Answer 3

clearfix是元素在自身之后自动清除的一种方式，因此您不需要添加额外的标记。它通常用于浮动布局，其中的元素是浮动的，以便水平堆叠。

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