什么是clearfix？

本文翻译自：What is a clearfix?

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 actually is a clearfix? 经过快速的Google搜索后，我了解到有时它是针对IE6的，但实际上是一个clearfix？

Could you provide some examples of a layout with a clearfix, compared to a layout without a clearfix? 与没有clearfix的布局相比，您能否提供一些带有clearfix的布局的示例？

#1楼

参考：https://stackoom.com/question/ZtIR/什么是clearfix

#2楼

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: "\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}

Here is a compact version of it... 这是它的精简版...

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

#3楼

The clearfix allows a container to wrap its floated children. clearfix允许容器包装其浮动的子代。 Without a clearfix or 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 Gallagher and Thierry Koblentz as 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;
}

#4楼

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. 还有其他布局方案，但是浮动在当今的Web设计/开发中太普遍了，无法忽略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) */
}

reference 参考

#5楼

If you learn by visualizing, this picture might help you understand what clearfix does. 如果您通过可视化学习，此图片可能会帮助您了解clearfix的作用。

#6楼

The other (and perhaps simplest) option for acheiving a clearfix is to use overflow:hidden; 实现clearfix的另一个（也许是最简单的）选项是使用overflow:hidden; ;。 on the containing element. 在包含元素上。 For example 例如

 .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. 当然，这只能在您不希望内容溢出的情况下使用。

什么是clearfix？相关推荐

简述 clearfix 的原理
Demo Demo中的CSS中用到这样一个样式: .clearfix:after{content: '';display: block;clear: both; 复制代码该样式通过::after选择 ...
清除浮动（clearfix）
在写HTML代码的时候,发现在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开.看 ...
css clearfix(针对火狐height:auto无效解决方案)
Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开. 例: <div styl ...
clearfix清除浮动
在开发html页面时,我们经常会用到css的清除浮动,这里我推荐一种版本的清除方法,个人感觉非常好用. .clearfix:before,.clearfix:after{content:"& ...
解读浮动闭合最佳方案：clearfix
之前给大家介绍两种浮动闭合的办法 ,得知很多同学都在使用下面的骨灰级解决办法: .clear{clear:both;height:0;overflow:hidden;} 上诉办法是在需要清除浮动的地方 ...
css clearfix_如何使用CSS清除浮点数（clearfix）？
css clearfix Introduction: 介绍: Dealing with various elements on a website or web page can sometimes ...
div css入门教程，更简洁CSS清理浮动方式：clearfix
- 清理浮动有很多种方式,像使用 br 标签自带的 clear 属,使用元素的 overflow,使用空标签来设置 clear:both 等等.但考虑到兼容问题和语义化的问题,一般我们都会使用如下代码 ...
清除浮动的最佳方案：clearfix
CSS清除浮动float闭合,很多同学都在使用下面的骨灰级解决办法: .clear{clear:both;} 或者 .clear{clear:both;height:0;overflow:hidden ...
Bootstrap3基础 clearfix pull-left/right 辅助类样式快速左右浮动
内容参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...

什么是clearfix？

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

什么是clearfix？相关推荐

最新文章

热门文章