clearfix如何工作?

时间:2014-04-27 07:10:31

标签: html css

我正在克隆网站的主页,当我跟踪并复制他们的代码时,我看到我的垂直滚动条加倍(当我到达容器部分时)。我试图搜索如何摆脱这一点,有些人说,你必须将身体的高度修复到100%或简单地把溢出-y:隐藏,是的它有效,但我现在的另一个问题是,一些以下内容遗失。如果其他垂直滚动条在那里就会出现,我认为它与这个“clearfix”事情有关,我仍然不明白它是如何工作的。请帮助我摆脱这个,我仍然是一名实习生,我仍然不知道css3或其他什么,网站克隆是我的项目之一。谢谢!

4 个答案:

答案 0 :(得分:2)

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

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

查看有关clearfix的更多信息:http://css-tricks.com/snippets/css/clear-fix/

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

答案 1 :(得分:0)

Clearfix仅用于设置容器的高度,该容器具有设置了position属性的子元素。

Position属性使元素浮动在文档中的其他元素上。因此,在这些情况下使用clearfix来相应地设置父亲的身高和身高。

点击此处了解详情:http://css-tricks.com/snippets/css/clear-fix/

答案 2 :(得分:0)

尝试将其添加到DIV和/或页面的末尾。

<div style="clear:both;"></div>

答案 3 :(得分:0)

clearfix是元素自动清除后的一种方式,因此您无需添加其他标记。它通常用于浮动布局,其中元素浮动以水平堆叠。

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