关于html：什么是clearfix？

What is a clearfix?

最近我浏览了一些网站的代码，发现每个都有一个类clearfix。

在一次快速的谷歌搜索之后，我了解到它有时适用于IE6，但什么是ClearFix？

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

相关讨论

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

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

display: inline-block—更好
flexbox-最佳(但浏览器支持有限)

flexbox支持Firefox 18、Chrome 21、Opera 12.10和Internet Explorer 10、Safari 6.1(包括Mobile Safari)以及Android的默认浏览器4.4。

有关详细的浏览器列表，请参阅：http://canius.com/flexbox。

(也许一旦它的位置完全确定，它可能是布局元素的绝对推荐方法。)

Clearfix Image

ClearFix是一种元素自动清除其子元素的方法，这样您就不需要添加额外的标记。它通常用于浮动布局，其中元素浮动以水平堆叠。

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

ClearFix执行如下：

1
2
3
4
5
6
7

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

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

1
2
3
4
5

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

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

1 2	Sidebar <!-- Clear the float -->

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

1 2	Sidebar <!-- No Clearing div! -->

阅读本文-作者Chris Coyer@css tricks

相关讨论

我认为这可能解释得更好。jqui.net/tips-tricks/css-clearfix而不是。(圆点)你有一个空格，这样你就不会在你的页面上到处都有圆点了：)但原理是一样的。
因为设置了height: 0;，所以点不会出现。
不管出于什么原因，空白区比点更好，我在一些浏览器上遇到了点问题，因此我为什么提到它：)稍微改进一下不会有什么坏处：)
content:"\00A0";这个0a0代表一个空白，一个简单的空白不起作用：)对不起。：)
@Madarauchiha，为什么display:inline块优于浮点元素？唯一的问题是，使用inline块显示会导致标记之间出现空白，这不总是容易控制的。
它总是容易控制的。如果没有HTML访问权限，则在容器上设置字体大小：0。
@Madarauchiha，然后您必须重新设置display: inline-block元素中内容的字体大小。用CSS让两个方块并排坐在一起，你必须走多远，这太荒谬了。
@kzqai：这就是为什么当flexbox得到更广泛的支持时，它是首选的选项。
不同意display: inline-block比基于块的布局的浮动更好。内联块，顾名思义，是内联布局——大多数布局都是基于块的，而将这些块放在内联格式上下文中是没有意义的。您还必须处理与内联格式相关的各种问题，如许多其他人指出的元素间空白、其他内联元素、大小调整、对齐等。当然，float布局也没有什么意义，但至少float具有基于块的优点。
@是的，那要看情况而定。每个人都有自己的问题。但我们正处在一个时代，flexbox就是其中之一。所以这意味着两者都很糟糕。你只需要选择较小的邪恶来完成你的工作。
如css-tricks.com(css tricks.com/snippets/css/clear fix)中所述，这是使用clearfix的最佳方法：.group:before，.group:after content:"；display:table；.group:after clear:both；.group zoom:1；/*对于IE 6/7(触发器hasLayout)*/
我不明白为什么有两种ClearFix：一种是针对零高度问题的(有溢出：auto)，另一种是消除对清除的需求的：两种Div。为什么它们被称为相同的东西？
@用户1767586 ClearFix实际上是一个黑客，一个解决方案。浮动不应该用于布局，这不是它们的目的。假设您不需要较低的IE支持，您应该使用flexbox进行布局。
"flexbox-最佳"。这是一种观点，我不一定同意。flexbox有时间和地点，但不替换浮动元素。FlexBox添加了更稳定的行-列-行-列方法(如表)。这对于响应式设计是不灵活的，您应该考虑什么对您最有效。就个人而言，我不喜欢用表格构建网站。因为这个原因，我不喜欢使用flexbox。
inline-block在空白敏感度方面有一个值得注意的问题，应该也加入到Kludgy的黑名单中。基于display:flex的解决方案在编码时看起来确实不错。
@Micahwilliamson，与其他方法不同，flexbox的字面意思就是为这个设计的。因此，它在客观上优于其他被认为是黑客的解决方案。

如果您通过可视化学习，此图片可能会帮助您理解ClearFix的功能。

enter image description here

相关讨论

其他答案是正确的。但我想补充一点，这是人们第一次学习CSS，并滥用float进行所有布局时的遗留问题。float的目的是做一些类似于长文本旁边的浮动图像的事情，但是很多人将它作为他们的主要布局机制。因为这不是真正的目的，所以你需要像"clearfix"这样的黑客来让它工作。

如今，display: inline-block是一个可靠的替代方案(除了ie6和ie7)，尽管更多的现代浏览器在flexbox、grid layout等名称下提供了更有用的布局机制。

相关讨论

clearfix允许容器包装其浮动子对象。如果没有clearfix或等效样式，容器就不会围绕其浮动子容器而折叠，就像其浮动子容器是绝对定位的一样。

有几个版本的ClearFix，其中NicolasGallagher和ThierryKoblentz是主要作者。

如果您希望支持较旧的浏览器，最好使用此ClearFix：

1
2
3
4
5
6
7
8
9
10
11
12

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

.clearfix:after {
clear: both;
}

.clearfix {
*zoom: 1;
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

&:after {
clear:both;
}

& {
*zoom:1;
}
}

#clearfixedelement {
@extend %clearfix;
}

如果您不关心支持旧的浏览器，有一个较短的版本：

1
2
3
4
5

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

相关讨论

对2017年第二季度的情况进行更新。

firefox 53、chrome 58和opera 45中提供了一个新的css3显示属性。

1
2
3

.clearfix {
display: flow-root;
}

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

元素(其显示属性设置为Flow Root)生成一个块容器框，并使用流布局来布局其内容。它总是为其内容建立一个新的块格式上下文。

这意味着，如果使用包含一个或多个浮动子级的父DIV，则此属性将确保父级包含其所有子级。不需要任何ClearFix黑客。在任何子元素上，甚至不是最后一个虚拟元素上(如果在最后一个子元素上使用clearfix变量with:before)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

.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;
}

1
2
3
4

This container box encloses all of its floating children.
Floating box 1
Floating box 2
Floating box 3

相关讨论

简单地说，ClearFix是一个黑客。

这是我们所有人都必须忍受的丑陋的事情之一，因为它确实是确保浮动的儿童元素不会溢出父母的唯一合理方式。还有其他的布局方案，但是浮动在今天的Web设计/开发中太常见了，以至于不能忽略ClearFix黑客的价值。

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

参考

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

1
2
3
4
5
6
7
8

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

这些组合行为的目的是创建一个容器:after，该活动元素包含一个标记为hidden的"."，它将清除所有先前存在的浮动并有效地为下一个内容重置页面。

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

1
2
3
4
5
6
7
8
9
10

.parent {
background: red;
overflow: hidden;
}
.segment-a {
float: left;
}
.segment-b {
float: right;
}

1
2
3
4

Float left

Float right

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

我试过了被接受的答案，但内容对齐仍然有问题。如下图所示，添加"：before"选择器修复了问题：

1
2
3
4
5
6
7
8
9
10
11

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

上面的代码将编译为下面的CSS：

1
2
3
4
5
6
7
8
9

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

这里有一个不同的方法，相同的东西，但有点不同

差异是内容点，用\00A0==whitespace替换。

有关更多信息，请访问http://www.jqui.net/tips-tricks/css-clearfix/

1
2
3
4
5

.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}

这是一个紧凑的版本…

1	.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}

相关讨论