English 我有一个div包装两栏式布局的古老问题。我的侧边栏div处于浮动状态，因此我的容器无法包装内容和侧边栏。
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
似乎有很多方法可以解决Firefox中的明显错误：
<br clear="all"/>overflow:autooverflow:hidden在我的情况下，似乎唯一可以正常工作的<br clear="all"/>解决方案是解决方案，这有点麻烦。overflow:auto给我带来讨厌的滚动条，并且overflow:hidden肯定有副作用。另外，由于其不正确的行为，IE7显然不应该遭受此问题的困扰，但就我而言，它与Firefox一样遭受痛苦。
我们目前可以使用的哪种方法最可靠？
You could also put this in your CSS:
.cb:after{
visibility: hidden;
display: block;
content: ".";
clear: both;
height: 0;
}
*:first-child+html .cb{zoom: 1} /* for IE7 */
And add class "cb" to your parent div:
<div id="container" class="cb">
You will not need to add anything else to your original code...
#content{float:left;}
#sidebar{float:left;}
.clear{clear:both; display:block; height:0px; width:0px; overflow:hidden;}<div id="container">
<div id="content">text 1 </div>
<div id="sidebar">text 2</div>
<div class="clear"></div>
</div>Other clearfixes either require the floated element to be in a well marked off container or need an extra, semantically empty <div>. Conversely, clear separation of content and markup requires a strict CSS solution to this problem.
The mere fact that one needs to mark off the end of a float, does not allow for unattended CSS typesetting.
If the latter is your goal, the float should be left open for anything (paragraphs, ordered and unordered lists etc.) to wrap around it, until a "clearfix" is encountered. For example, the clearfix might be set by a new heading.
This is why I use the following clearfix with new headings:
h1 {
clear: both;
display: inline-block;
width: 100%;
}
This solution gets used extensively on my website to solve the problem: The text next to a floated miniature is short and the top-margin of the next clearing object is not respected.
It also prevents any manual intervention when automatically generating PDFs from the site. Here is an example page.
I always use the micro-clearfix :
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
*/
.cf {
*zoom: 1;
}
In Cascade Framework I even apply it by default on block level elements. IMO, applying it by default on block level elements gives block level elements more intuitive behavior than their traditonal behavior. It also made it a lot easier for me to add support for older browsers to Cascade Framework (which supports IE6-8 as well as modern browsers).
A new display value seems to the job in one line.
display: flow-root;
From the w3 spec: "The element generates a block container box, and lays out its contents using flow layout. It always establishes a new block formatting context for its contents."
Information: https://www.w3.org/TR/css-display-3/#valdef-display-flow-root https://www.chromestatus.com/feature/5769454877147136
※As shown in the link above, support is currently limited so fallback support like below may be of use: https://github.com/fliptheweb/postcss-flow-root
With LESS (http://lesscss.org/), one can create a handy clearfix helper:
.clearfix() {
zoom: 1;
&:before {
content: '';
display: block;
}
&:after {
content: '';
display: table;
clear: both;
}
}
And then use it with problematic containers, for example:
<!-- HTML -->
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
/* LESS */
div#container {
.clearfix();
}
使用SASS，clearfix是：
@mixin clearfix {
&:before, &:after {
content: '';
display: table;
}
&:after {
clear: both;
}
*zoom: 1;
}
它的用法如下：
.container {
@include clearfix;
}
如果您想要新的clearfix：
@mixin newclearfix {
&:after {
content:"";
display:table;
clear:both;
}
}
我已经尝试了所有这些解决方案，<html>当我使用以下代码时，将自动向元素中添加较大的空白：
.clearfix:after {
visibility: hidden;
display: block;
content: ".";
clear: both;
height: 0;
}
最后，通过添加font-size: 0;上述CSS 解决了边距问题。
.clearFix:after {
content: "";
display: table;
clear: both;
}
老实说 所有解决方案似乎都是修复渲染错误的技巧……我错了吗？
我发现<br clear="all" />这是最简单，最简单的。class="clearfix"到处都看不到有人反对无关的标记元素的感觉，是吗？您只是在另一个画布上绘制问题。
我也使用该display: hidden解决方案，它很棒，不需要任何额外的类声明或html标记...，但是有时您需要元素来使容器溢出，例如。漂亮的丝带和腰带
我总是浮动网格的主要部分并应用于clear: both;页脚。不需要额外的div或class。
我只用：-
.clear:after{
clear: both;
content: "";
display: block;
}
效果最好，并且与IE8 +兼容:)
这是一个很整洁的解决方案：
/* For modern browsers */
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
}
已知可在Firefox 3.5 +，Safari 4 +，Chrome，Opera 9 +，IE 6+中运行
不必包括：before选择器来清除浮点数，但它可以防止在现代浏览器中折叠上边距。这样可以确保在应用zoom：1时与IE 6/7保持视觉一致性。
引导程序中的Clearfix：
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
溢出属性可用于清除浮点数，而无需额外的标记：
.container { overflow: hidden; }
这适用于除IE6之外的所有浏览器，您需要做的就是启用hasLayout（缩放是我的首选方法）：
.container { zoom: 1; }
我在官方的CLEARFIX方法中发现了一个错误：DOT没有字体大小。而且，如果您设置，height = 0并且DOM-Tree中的第一个Element具有类“ clearfix”，则您始终在页面底部有12px的空白：）
您必须像这样修复它：
/* float clearing for everyone else */
.clearfix:after{
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
现在，它已成为YAML布局的一部分...看看吧-这非常有趣！ http://www.yaml.de/en/home.html
我建议使用以下内容，该内容取自http://html5boilerplate.com/
/* >> The Magnificent CLEARFIX << */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
} /* Hides from IE-mac \*/
.clearfix {
display: block;
}
Inuit.css和Bourbon使用的新标准-两个使用非常广泛且维护良好的CSS / Sass框架：
.btcf:after {
content:"";
display:block;
clear:both;
}
请记住，clearfix本质上是针对flexbox布局现在可以以更智能的方式提供的工具。CSS浮点数最初是设计用于使内联内容四处流淌的（如长篇文章中的图像），而不是用于网格布局等。如果您的目标浏览器支持flexbox，那么值得研究。
这不支持IE7。您不应该支持IE7。这样做继续使用户面临无法修复的安全漏洞，并使所有其他Web开发人员的生活更加艰难，因为这减轻了用户和组织切换到现代浏览器的压力。
该clearfix 由Thierry Koblentz在2012年7月宣布并解释。它摆脱了Nicolas Gallagher的2011年micro-clearfix的不必要的限制。在此过程中，它将释放一个伪元素供您自己使用。这已更新为使用，display: block而不是display: table（再次归功于Thierry Koblentz）。
It is so simple clearfix clears the issue by when we using the float properties inside the div element.If we use two div elements one as float:left; and other one as float:right; we can use clearfix for the parent of the two div element. If we refuse to use clearfix unnecessary spaces fill with contents below and site structure will be broken.