什么是clearfix? - Code

最近我在浏览一些网站的代码，看到每个<div>都有一个类clearfix。

在快速谷歌搜索后，我了解到它是IE6有时，但实际上什么是一个clearfix?

你能提供一些例子的布局与一个clearfix，比较没有一个布局clearfix?

当前回答

简单地说，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-17 02:27:52

其他回答

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

.parent { 背景:红色; 溢出:隐藏; ｝ .segment-a { 浮:左; ｝ .segment-b { 浮:正确; ｝ < div class = "父" > < div class = "分割一个" > 左浮动 < / div > < div class = "段b”> 浮动对吧 < / div > < / div >

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

2015-04-19 08:39:11

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-18 09:35:45

简单地说，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-17 02:27:52

什么是Clearfix?

一种元素自动清除其子元素的方法，无需任何额外标记。

使用属性:CSS clearfix用于修复来自所需元素的溢出元素。这可以使用3个属性:

溢出财产高度属性浮动属性

这3个CSS属性都用于修复溢出元素。

为什么ClearFix ?

为了避免添加不必要的标记，元素可以使用clearfix自动清除或修复其元素。它被用于浮动布局，其中元素被浮动以形成水平堆栈。

当Clearfix ?

当两个或两个以上的浮动项目放在一起时。

当项目以这种方式定位时，父容器的高度为0，这很容易弄乱布局。浏览器之间的问题是不一致的，这使得问题更加困难。为了解决所有这些问题，创建了clearfix。

是这样的:

示例(供您理解):

<head> <style> div { border: 3px solid #4CAF50; padding: 5px; } .img1 { float: right; } .img2 { float: right; } .clearfix { overflow: auto; } </style> </head> <body> <h2>Without Clearfix</h2> <p>This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container:</p> <div> <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet... </div> <h2 style="clear:right">With Clearfix</h2> <p>We can fix this by adding a clearfix class with overflow: auto; to the containing element:</p> <div class="clearfix"> <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet... </div> </body>

以上代码输出:

Clearfix正在过时吗?

在它第一次被提出并在2007年和2013年进行了更新后，将近15年的今天，clearfix已经失去了相关性，因为今天CSS Grid和Flexbox正在填补web上高级布局的空白。

希望能有所帮助。

2023-01-30 08:46:58

这是一个不同的方法，同样的东西，但有点不同

区别在于内容点被替换为\00A0 ==空格

更多信息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-20 09:17:10

aliyun