Html 什么是清除修复？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8554043/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is a clearfix?
提问by H Bellamy
Recently I was looking through some website's code, and saw that every <div>had a class clearfix.
最近我在浏览一些网站的代码，发现每个网站<div>都有一个 class clearfix。
After a quick Google search, I learned that it is for IE6 sometimes, but what actuallyis a clearfix?
在谷歌快速搜索后，我了解到它有时是针对 IE6 的，但实际上什么是 clearfix？
Could you provide some examples of a layout with a clearfix, compared to a layout without a clearfix?
您能否提供一些带有 clearfix 的布局的示例，与没有 clearfix 的布局相比？
采纳答案by Madara's Ghost
If you don't need to support IE9 or lower, you can use flexbox freely, and don't need to use floated layouts.
如果不需要支持IE9或更低版本，可以自由使用flexbox，不需要使用浮动布局。
It's worth noting that today, the use of floated elements for layout is getting more and more discouraged with the use of better alternatives.
值得注意的是，今天，随着使用更好的替代方案，使用浮动元素进行布局越来越不受欢迎。
display: inline-block- Better- Flexbox- Best (but limited browser support)
display: inline-block- 更好的- Flexbox- 最佳（但浏览器支持有限）
Flexbox is supported from Firefox 18, Chrome 21, Opera 12.10, and Internet Explorer 10, Safari 6.1 (including Mobile Safari) and Android's default browser 4.4.
Flexbox 支持 Firefox 18、Chrome 21、Opera 12.10 和 Internet Explorer 10、Safari 6.1（包括 Mobile Safari）和 Android 的默认浏览器 4.4。
For a detailed browser list see: https://caniuse.com/flexbox.
有关详细的浏览器列表，请参阅：https: //caniuse.com/flexbox。
(Perhaps once its position is established completely, it may be the absolutely recommended way of laying out elements.)
（也许一旦它的位置完全确立，它可能是绝对推荐的元素布局方式。）
A clearfix is a way for an element to automatically clear its child elements, so that you don't need to add additional markup. It's generally used in float layoutswhere elements are floated to be stacked horizontally.
clearfix 是元素自动清除其子元素的一种方式，因此您无需添加额外的标记。它通常用于元素浮动以水平堆叠的浮动布局。
The clearfix is a way to combat the zero-height container problemfor floated elements
A clearfix is performed as follows:
清除修复执行如下：
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Or, if you don't require IE<8 support, the following is fine too:
或者，如果您不需要 IE<8 支持，以下也可以：
.clearfix:after {
content: "";
display: table;
clear: both;
}
Normally you would need to do something as follows:
通常，您需要执行以下操作：
<div>
<div style="float: left;">Sidebar</div>
<div style="clear: both;"></div> <!-- Clear the float -->
</div>
With clearfix, you only need the following:
使用 clearfix，您只需要以下内容：
<div class="clearfix">
<div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->
</div>
Read about it in this article - by Chris Coyer @ CSS-Tricks
回答by Domenic
The other answers are correct. But I want to add that it is a relic of the time when people were first learning CSS, and abused floatto do all their layout. floatis meant to do stuff like float images next to long runs of text, but lots of people used it as their primary layout mechanism. Since it wasn't really meant for that, you need hacks like "clearfix" to make it work.
其他答案都是正确的。但我想补充一点，这是人们第一次学习 CSS 并滥用float其进行所有布局的时代的遗物。float旨在在长文本旁边做诸如浮动图像之类的事情，但很多人将其用作主要的布局机制。由于它并不是真正用于此目的，因此您需要像“clearfix”这样的技巧才能使其工作。
These days display: inline-blockis a solid alternative (except for IE6 and IE7), although more modern browsers are coming with even more useful layout mechanisms under names like flexbox, grid layout, etc.
这些天display: inline-block是一个可靠的替代方案（除了 IE6 和 IE7），尽管更现代的浏览器正在以 flexbox、网格布局等名称提供更有用的布局机制。
回答by John Slegers
The clearfixallows a container to wrap its floated children. Without a clearfixor equivalent styling, a container does not wrap around its floated children and collapses, just as if its floated children were positioned absolutely.
在clearfix允许的容器来包装其浮动孩子。如果没有clearfix样式或等效样式，容器不会环绕其浮动子项并折叠，就像其浮动子项被绝对定位一样。
There are several versions of the clearfix, with Nicolas Gallagherand Thierry Koblentzas key authors.
clearfix 有多个版本，主要作者是Nicolas Gallagher和Thierry Koblentz。
If you want support for older browsers, it's best to use this clearfix :
如果你想支持旧浏览器，最好使用这个 clearfix ：
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
In SCSS, you could use the following technique :
在 SCSS 中，您可以使用以下技术：
%clearfix {
&:before, &:after {
content:" ";
display:table;
}
&:after {
clear:both;
}
& {
*zoom:1;
}
}
#clearfixedelement {
@extend %clearfix;
}
If you don't care about supporting older browsers, there's a shorter version :
如果您不关心支持旧浏览器，还有一个较短的版本：
.clearfix:after {
content:"";
display:table;
clear:both;
}
回答by Kir Kanos
To offer an update on the situation on Q2 of 2017.
提供有关 2017 年第二季度情况的最新信息。
A new CSS3 display property is available in Firefox 53, Chrome 58and Opera 45.
Firefox 53、Chrome 58和 Opera 45 中提供了新的 CSS3 显示属性。
.clearfix {
display: flow-root;
}
Check the availability for any browser here: http://caniuse.com/#feat=flow-root
在此处检查任何浏览器的可用性：http: //caniuse.com/#feat=flow-root
The element (with a display property set to flow-root) generates a block container box, and lays out its contents using flow layout. It always establishes a new block formatting context for its contents.
元素（显示属性设置为 flow-root）生成一个块容器框，并使用流布局布置其内容。它总是为其内容建立一个新的块格式化上下文。
Meaning that if you use a parent div containing one or several floating children, this property is going to ensure the parent encloses all of its children. Without any need for a clearfix hack. On any children, nor even a last dummy element (if you were using the clearfix variant with :before on the last children).
这意味着如果您使用包含一个或多个浮动子项的父 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>回答by JRulle
Simply put, clearfix is a hack.
简单地说，clearfix 是一个 hack。
It is one of those ugly things that we all just have to live with as it is really the only reasonable way of ensuring floated child elements don't overflow their parents. There are other layout schemes out there but floating is too commonplace in web design/development today to ignore the value of the clearfix hack.
这是我们所有人都必须忍受的丑陋事物之一，因为它确实是确保浮动子元素不会溢出其父元素的唯一合理方法。还有其他布局方案，但浮动在当今的网页设计/开发中太普遍了，以至于忽略了 clearfix hack 的价值。
I personally lean towards the Micro Clearfix solution (Nicolas Gallagher)
我个人倾向于 Micro Clearfix 解决方案 (Nicolas Gallagher)
.container:before,
.container:after {
content:"";
display:table;
}
.container:after {
clear:both;
}
.container {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
回答by Nathan Taylor
A technique commonly used in CSS float-based layouts is assigning a handful of CSS properties to an element which you know will contain floating elements. The technique, which is commonly implemented using a class definition called clearfix, (usually) implements the following CSS behaviors:
CSS 浮动布局中常用的一种技术是将一些 CSS 属性分配给您知道将包含浮动元素的元素。该技术通常使用名为 的类定义clearfix来实现，（通常）实现以下 CSS 行为：
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
zoom: 1
}
The purpose of these combined behaviors is to create a container :afterthe active element containing a single '.' marked as hidden which will clear all preexisting floats and effectively reset the the page for the next piece of content.
这些组合行为的目的是创建一个包含:after单个“.”的活动元素的容器。标记为隐藏，这将清除所有预先存在的浮动并有效地为下一段内容重置页面。
回答by Dan W
The other (and perhaps simplest) option for acheiving a clearfix is to use overflow:hidden;on the containing element. For example
实现 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>Of course this can only be used in instances where you never wish the content to overflow.
当然，这只能用于您从不希望内容溢出的情况。
回答by DevWL
I tried out the accepted answer but I still had a problem with the content alignment. Adding a ":before" selector as shown below fixed the issue:
我尝试了接受的答案，但内容对齐仍然存在问题。添加一个“:before”选择器，如下所示解决了这个问题：
// LESS HELPER
.clearfix()
{
&:after, &:before{
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
}
LESS above will compile to CSS below:
上面的 LESS 将编译为下面的 CSS：
clearfix:after,
clearfix:before {
content: " ";
/* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
回答by Val
Here is a different method same thing but a little different
这是一个不同的方法同样的事情但有点不同
the difference is the content dot which is replaced with a \00A0== whitespace
不同之处在于内容点被替换为\00A0==whitespace
More on this http://www.jqui.net/tips-tricks/css-clearfix/
更多关于这个http://www.jqui.net/tips-tricks/css-clearfix/
.clearfix:after { content: ".clearfix:after { content: "##代码##A0"; 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}
A0"; 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}
Here is a compact version of it...
这是它的紧凑版本......
##代码##