1055

最近我在浏览一些网站的代码，发现每个<div> 都有一个 class clearfix。

快速谷歌搜索后，我了解到它有时适用于 IE6，但实际上什么是 clearfix？

与没有 clearfix 的布局相比，您能否提供一些带有 clearfix 的布局示例？

4

9 回答 9

1027

如果不需要支持 IE9 或更低版本，可以自由使用 flexbox，不需要使用浮动布局。

值得注意的是，今天，使用浮动元素进行布局越来越不鼓励使用更好的替代方案。

  • display: inline-block- 更好的
  • Flexbox - 最好的（但有限的浏览器支持）

Firefox 18、Chrome 21、Opera 12.10 和 Internet Explorer 10、Safari 6.1（包括 Mobile Safari）和 Android 的默认浏览器 4.4 都支持 Flexbox。

有关详细的浏览器列表，请参见：https ://caniuse.com/flexbox 。

（也许一旦它的位置完全确立，它可能是绝对推荐的布局元素的方式。）

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

clearfix 是一种解决浮动元素的零高度容器问题的方法

clearfix 执行如下：

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

或者，如果您不需要 IE<8 支持，以下也可以：

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

通常，您需要执行以下操作：

<div>
    <div style="float: left;">Sidebar</div>
    <div style="clear: both;"></div> <!-- Clear the float -->
</div>

使用 clearfix，您只需要以下内容：

<div class="clearfix">
    <div style="float: left;" class="clearfix">Sidebar</div>
    <!-- No Clearing div! -->
</div>

在这篇文章中阅读它- 由 Chris Coyer @ CSS-Tricks

于 2011-12-18T19:04:24.703 回答
72

其他答案都是正确的。但我想补充一点，这是人们第一次学习 CSS 并滥用float其所有布局的时代的遗物。float旨在在长文本旁边做浮动图像之类的东西，但很多人将其用作主要布局机制。由于它并不是真正的意思，因此您需要像“clearfix”这样的黑客来使其工作。

这些天display: inline-block是一个可靠的选择（除了 IE6 和 IE7），尽管更现代的浏览器正在提供更有用的布局机制，例如 flexbox、网格布局等。

于 2011-12-18T19:08:39.700 回答
46

clearfix允许容器包裹其浮动的子项。如果没有clearfix或等效的样式，容器不会环绕其浮动的子项并折叠，就像它的浮动子项被绝对定位一样。

clearfix 有多个版本，主要作者是Nicolas Gallagher和Thierry Koblentz。

如果你想支持旧浏览器，最好使用这个 clearfix ：

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

在 SCSS 中，您可以使用以下技术：

%clearfix {
    &:before, &:after {
        content:" ";
        display:table;
    }

    &:after {
        clear:both;
    }

    & {
        *zoom:1;
    }
}

#clearfixedelement {
    @extend %clearfix;
}

如果您不关心支持旧版浏览器，可以使用更短的版本：

.clearfix:after {
    content:"";
    display:table;
    clear:both;
}
于 2014-04-18T09:35:45.130 回答
18

提供 2017 年第二季度的最新情况。

Firefox 53、 Chrome 58和 Opera 45中提供了新的 CSS3 显示属性。

.clearfix {
   display: flow-root;
}

在此处检查任何浏览器的可用性：http: //caniuse.com/#feat=flow-root

该元素（显示属性设置为 flow-root）生成一个块容器框，并使用流布局布置其内容。它总是为其内容建立一个新的块格式化上下文。

这意味着如果您使用包含一个或多个浮动子级的父级 div，此属性将确保父级包含其所有子级。无需 clearfix hack。在任何孩子上，甚至最后一个虚拟元素上（如果您在最后一个孩子上使用带有 :before 的 clearfix 变体）。

.container {
  display: flow-root;
  background-color: Gainsboro;
}

.item {
  border: 1px solid Black;
  float: left;
}

.item1 {  
  height: 120px;
  width: 120px;
}

.item2 {  
  height: 80px;
  width: 140px;
  float: right;
}

.item3 {  
  height: 160px;
  width: 110px;
}
<div class="container">
  This container box encloses all of its floating children.
  <div class="item item1">Floating box 1</div>
  <div class="item item2">Floating box 2</div> 
  <div class="item item3">Floating box 3</div>  
</div>

于 2017-04-20T21:02:53.790 回答
11

简单地说，clearfix 是一个 hack。

这是我们所有人都必须忍受的那些丑陋的事情之一，因为它确实是确保浮动子元素不会溢出其父母的唯一合理方法。还有其他布局方案，但浮动在当今的网页设计/开发中太常见了，无法忽视 clearfix hack 的价值。

我个人倾向于 Micro Clearfix 解决方案 (Nicolas Gallagher)

.container:before,
.container:after {
  content:"";
  display:table;
}
.container:after {
  clear:both;
}
.container {
  zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

参考

于 2014-12-17T02:27:52.583 回答
6

基于 CSS 浮动的布局中常用的一种技术是将少量 CSS 属性分配给您知道将包含浮动元素的元素。该技术通常使用名为 的类定义clearfix来实现，（通常）实现以下 CSS 行为：

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

这些组合行为的目的是创建一个包含:after单个“.”的活动元素的容器。标记为隐藏，这将清除所有预先存在的浮动并有效地为下一段内容重置页面。

于 2011-12-18T19:09:41.933 回答
3

我尝试了接受的答案，但内容对齐仍然存在问题。添加如下所示的“:before”选择器解决了这个问题：

// LESS HELPER
.clearfix()
{
    &:after, &:before{
       content: " "; /* Older browser do not support empty content */
       visibility: hidden;
       display: block;
       height: 0;
       clear: both;
    }
}

上面的 LESS 将编译为下面的 CSS：

clearfix:after,
clearfix:before {
  content: " ";
  /* Older browser do not support empty content */
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}
于 2016-01-13T00:56:39.190 回答
1

实现 clearfix 的另一个（也许是最简单的）选项是overflow:hidden;在包含元素上使用。例如

.parent {
  background: red;
  overflow: hidden;
}
.segment-a {
  float: left;
}
.segment-b {
  float: right;
}
<div class="parent">
  <div class="segment-a">
    Float left
  </div>
  <div class="segment-b">
    Float right
  </div>
</div>

当然，这只能在您不希望内容溢出的情况下使用。

于 2015-04-19T08:39:11.513 回答
-1

这是一种不同的方法，相同的东西，但有点不同

不同之处在于内容点被替换为\00A0==whitespace

更多关于这个http://www.jqui.net/tips-tricks/css-clearfix/

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix{ display: inline-block;}
html[xmlns] .clearfix { display: block;}
* html .clearfix{ height: 1%;}
.clearfix {display: block}

这是它的精简版...

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;width:0;font-size: 0px}.clearfix{ display: inline-block;}html[xmlns] .clearfix { display: block;}* html .clearfix{ height: 1%;}.clearfix {display: block}
于 2012-09-20T09:17:10.090 回答