我可以使用哪些“clearfix”方法？
我有一个的老问题div包装一两栏布局。 我的侧边栏是浮动的，所以我的容器div无法包装内容和边栏。
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
似乎有很多方法可以修复Firefox中的清除错误：
<br clear="all"/> overflow:auto overflow:hidden 在我的情况下，唯一似乎正常工作的是<br clear="all"/>解决方案，它有点sc。。 overflow:auto给我讨厌的滚动条， overflow:hidden肯定有副作用。 另外，由于IE7的行为不正确，IE7显然不应该遭受这个问题，但在我的情况下，它和Firefox一样受到了影响。
目前可用的哪种方法是最强大的？
根据正在制作的设计，以下每个clearfix CSS解决方案都有其自身的优点。
clearfix确实有很有用的应用程序，但它也被用作黑客。 在使用clearfix之前，可能这些现代的css解决方案是有用的：
现代Clearfix解决方案
overflow: auto;容器overflow: auto;
清除浮动元素的最简单方法是在包含元素上使用样式overflow: auto 。 该解决方案适用于每个现代浏览器。
<div style="overflow: auto;">
<img
style="float: right;"
src="path/to/floated-element.png"
width="500"
height="500"
>
<p>Your content here…</p>
</div>
一个缺点是，在外部元素上使用特定边距和填充的组合可能会导致出现滚动条，但可以通过将边距和填充放置在另一个包含父元素的元素上来解决。
使用'overflow：hidden'也是一个clearfix解决方案，但不会有滚动条，但是使用hidden会裁剪位于包含元素之外的任何内容。
注意：在这个例子中，浮动元素是一个img标签，但可以是任何html元素。
Clearfix重装上阵
CSSMojo的Thierry Koblentz写道：最新的clearfix重新加载。 他指出，通过放弃对oldIE的支持，解决方案可以简化为一个css语句。 此外，使用display: block （而不是display: table ）可以在带有clearfix的元素是兄弟元素时正确折叠页边距。
.container::after {
content: "";
display: block;
clear: both;
}
这是clearfix的最新版本。
⋮
⋮
较早的Clearfix解决方案
以下解决方案对于现代浏览器不是必需的，但可用于定位旧版浏览器。
请注意，这些解决方案依赖浏览器错误，因此只有在上述解决方案均不适用于您的情况下才能使用。
他们大致按时间顺序排列。
“击败那ClearFix”，现代浏览器的一个clearfix
CSS Mojo的Thierry Koblentz指出，当针对现代浏览器时，我们现在可以放弃zoom和::before属性/值，并简单地使用：
.container::after {
content: "";
display: table;
clear: both;
}
此解决方案不支持IE 6/7 ......故意！
蒂埃里还提供：“谨慎的说法：如果你从头开始一个新项目，就去做吧，但不要把这个技术与现在的技术交换，因为即使你不支持oldIE，你的现有规则也会阻止利润率下降“。
Micro Clearfix
最新的和全球采用的clearfix解决方案，由Nicolas Gallagher提供的Micro Clearfix。
已知支持：Firefox 3.5+，Safari 4+，Chrome，Opera 9+，IE 6+
.container::before, .container::after {
content: "";
display: table;
}
.container::after {
clear: both;
}
.container {
zoom: 1;
}
溢出属性
当定位的内容不会显示在容器的边界之外时，这种基本方法对于通常情况是优选的。
http://www.quirksmode.org/css/clearing.html - 解释如何解决与此技术相关的常见问题，即设置width: 100%容器上的width: 100% 。
.container {
overflow: hidden;
display: inline-block;
display: block;
}
可以使用其他属性来触发元素的“hasLayout”，而不是使用display属性为IE设置“hasLayout”。
.container {
overflow: hidden;
zoom: 1;
display: block;
}
另一种使用overflow属性清除浮动的方法是使用下划线hack。 IE将应用以下划线开头的值，其他浏览器不会。 IE中的zoom属性触发hasLayout：
.container {
overflow: hidden;
_overflow: visible; /* for IE */
_zoom: 1; /* for IE */
}
虽然这可行......但使用黑客并不理想。
PIE：易清算方法
这种较旧的“Easy Clearing”方法的优点是允许定位元素挂在容器边界之外，代价是更棘手的CSS。
这个解决方案相当陈旧，但是您可以学习所有关于Easy Clearing on Position Is Everything的所有信息：http://www.positioniseverything.net/easyclearing.html
使用“清除”属性的元素
快速和肮脏的解决方案（有一些缺点），当你快速地把东西打在一起时：
<br style="clear: both" /> <!-- So dirty! -->
缺点
<br style="clear: both" />标签周围的<br style="clear: both" />标记。 我们试图解决什么问题？
浮动的东西有两个重要的考虑因素：
包含后裔浮游物。 这意味着所讨论的元素的高度足以包裹所有漂浮的后代。 （他们不会外面。）
绝缘子从外面漂浮。 这意味着元素内的后代应该能够使用clear: both ，并且不会与元素外的浮动元素进行交互。
阻止格式化上下文
只有一种方法可以做到这一点。 那就是建立一个新的块格式上下文。 建立块格式化上下文的元素是一个绝对矩形，浮动元素相互交互。 块格式化上下文将总是足够高以便可视化地包装其浮动后代，并且块格式上下文之外的浮动块不会与其中的元素进行交互。 这种双向绝缘正是你想要的。 在IE中，这个相同的概念被称为hasLayout，它可以通过zoom: 1进行设置。
有几种方法可以建立块格式上下文，但我推荐的解决方案是display: inline-block ， width: 100% 。 （当然，通常使用width: 100%注意事项，所以使用box-sizing: border-box或在另一个元素上放置padding ， margin和border 。）
最强大的解决方案
漂浮物最常见的应用可能是两列布局。 （可以扩展到三列。）
首先是标记结构。
<div class="container">
<div class="sidebar">
sidebar<br/>sidebar<br/>sidebar
</div>
<div class="main">
<div class="main-content">
main content
<span style="clear: both">
main content that uses <code>clear: both</code>
</span>
</div>
</div>
</div>
现在是CSS。
/* Should contain all floated and non-floated content, so it needs to
* establish a new block formatting context without using overflow: hidden.
*/
.container {
display: inline-block;
width: 100%;
zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}
/* Fixed-width floated sidebar. */
.sidebar {
float: left;
width: 160px;
}
/* Needs to make space for the sidebar. */
.main {
margin-left: 160px;
}
/* Establishes a new block formatting context to insulate descendants from
* the floating sidebar. */
.main-content {
display: inline-block;
width: 100%;
zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}
亲自尝试一下
去JS斌看看代码，看看这个解决方案是如何从头开始构建的。
传统的clearfix方法被认为有害
传统的clearfix解决方案的问题在于，他们使用两种不同的渲染概念为IE和其他人实现相同的目标。 在IE中，他们使用hasLayout来建立一个新的块格式化上下文，但是对于其他人而言，他们使用生成的框（ :after ）和clear: both ，这不会建立新的块格式上下文。 这意味着事情在所有情况下都不会表现一致。 有关这种情况不好的解释，请参阅关于Clearfix的所有信息都是错误的。
Inuit.css和Bourbon使用的新标准 - 两种使用非常广泛且维护良好的CSS / Sass框架：
.btcf:after {
content:"";
display:block;
clear:both;
}
笔记
请记住，clearfixes基本上是一种黑客机制，它可以让灵活布局现在能够以更智能的方式提供。 CSS浮动最初是为内联内容的流动而设计的 - 就像长篇文章中的图像 - 而不是网格布局等。 如果您的目标浏览器支持flexbox，那么值得深入研究。
这不支持IE7。 你不应该支持IE7。 这样做会继续让用户面临未固定的安全漏洞，并使所有其他Web开发人员的生活更加艰难，因为它减少了用户和组织转向现代浏览器的压力。
这个修补程序在2012年7月由Thierry Koblentz发布并解释。它从Nicolas Gallagher的2011 micro-clearfix中删除了不必要的重量。 在这个过程中，它释放了一个供您自己使用的伪元素。 这已更新为使用display: block而不是display: table （再次声明Thierry Koblentz）。
上一篇: What methods of ‘clearfix’ can I use?
下一篇: Why does HTTP's PUT method mandate a 201 Created/204 No Content split?