clearfix是如何工作的



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

"Clearfix"破解是一组应用于父元素的CSS规则,迫使该元素展开以包含任何子元素,包括那些已"浮动"的子元素。

在正常情况下,"浮动"元素会导致包含父元素的元素塌陷,只包含非浮动内容。"Clearfix"破解阻止了这种情况。

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

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

Clearfix只用于设置容器的高度,容器将有一个position属性集的子元素。

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

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

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

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

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

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

最新更新