我有一个老问题，即 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一样遇到了同样的问题。
目前对我们可用的哪种方法最为稳健？
根据所需的设计，以下每个clearfix CSS解决方案都有其自己的优点。
clearfix确实有用的应用程序，但它也被用作黑客。在使用clearfix之前，也许这些现代CSS解决方案会有用：
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' 也是一种清除浮动的解决方案，但不会有滚动条，但使用 hidden 将裁剪位于包含元素外部的任何内容。
注意：在此示例中，浮动元素是一个 img 标签，但可以是任何 HTML 元素。
CSSMojo上的Thierry Koblentz写道：最新的清除浮动再升级。他指出，通过放弃对旧版IE的支持，该解决方案可以简化为一个CSS语句。此外，使用display:block（而不是display:table）允许在具有clearfix的兄弟元素中正确折叠边距。
.container::after {
content: "";
display: block;
clear: both;
}
这是clearfix的最新版本。
⋮
⋮
以下解决方案对于现代浏览器来说并不必要，但可能对于针对较老的浏览器有用。
请注意，这些解决方案依赖于浏览器的漏洞，因此仅在上述解决方案均无效时才应使用它们。
它们按照时间顺序大致列出。
CSS Mojo的Thierry Koblentz指出，当我们针对现代浏览器进行设计时，我们可以直接使用以下代码而不需要再写zoom和::before属性或值：
.container::after {
content: "";
display: table;
clear: both;
}
这个解决方案不支持IE 6/7……故意的！
Thierry还提供了：“警告：如果你从头开始一个新项目，那就去做吧，但不要用现有的技术来替换它，因为即使你不支持旧版IE，你现有的规则也可以防止边距折叠。”
最近全球采用的清除浮动解决方案，Nicolas Gallagher的微型清除浮动。
已知支持：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％。
.container {
overflow: hidden;
display: inline-block;
display: block;
}
与其使用display属性为IE设置"hasLayout"，可以使用其他属性来触发元素的"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 */
}
虽然这有效... 但使用hack并不理想。
这种旧的“简易清除”方法的优点是允许定位元素悬挂在容器的边界之外，但代价是需要更加复杂的CSS。
虽然这个解决方案相当老，但您仍然可以在Position Is Everything网站上学习有关简易清除的所有信息：http://www.positioniseverything.net/easyclearing.html
当您需要快速拼凑一些东西时，这是一个快速而不太完美的解决方案（带有一些缺点）：
<br style="clear: both" /> <!-- So dirty! -->
<br style="clear: both" />标记。overflow: hidden 或 overflow: auto 并不会清除浮动（将其归类为“clearfix”是错误的）。相反，它会使元素创建一个新的格式化上下文，以便在其中容纳浮动。这会导致容器高度伸展以包含它们。没有任何清除操作涉及到——也就是说，你仍然可以根据你的布局选择是否清除容器中的浮动。 - BoltClock在浮动元素时，有两个重要的考虑因素:
包含后代浮动元素。 这意味着所讨论的元素会使自身变高，以包裹所有浮动的后代元素。(它们不悬挂在外面。)
隔离内部浮动元素和外部浮动元素之间的影响。 这意味着元素内部的后代元素应该能够使用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 Bin玩耍并且查看这个解决方案是如何从头开始构建的。
传统的clearfix 解决方案存在问题，它们使用两种不同的渲染概念来实现IE和其他浏览器相同的目标。在IE中，它们使用hasLayout来建立新的块级格式上下文，但对于其他浏览器，它们使用具有clear:both属性的生成框体（:after），这不会建立新的块级格式上下文。这意味着在所有情况下都不会表现得一致。关于为什么这样做是有问题的，请参见Everything you Know about Clearfix is Wrong。
width: 100％的常见注意事项是什么？” 此外，您是否建议在§2的¶1中使用zoom: 1？ - Baumroverflow：hidden实现了与hasLayout有所不同的东西？ - BaumrhasLayout的情况是否包括提到的某些CSS声明？还是它们都是独立的？ - BaumrhasLayout 的内容。我认为它与建立新的块级格式化上下文是同义词。这些元素本质上负责所有后代元素的布局。其中一个结果是，建立新的块级格式化上下文的元素包含浮动的后代元素，而元素外部的浮动不会与内部的 clear: left|right|both 元素交互。（这在上面的答案中有提到。） - Chris Calo最新的标准，被Inuit.css和Bourbon这两个广泛使用且维护良好的CSS/Sass框架所采用：
.btcf:after {
content:"";
display:block;
clear:both;
}
请记住，clearfix本质上是一种hack，而现在flexbox布局可以以更加简单和智能的方式提供此功能。CSS浮动最初是为内联内容流设计的，如长文本文章中的图像，而不是用于网格布局等。除非您专门针对旧版（非Edge）Internet Explorer，否则您的目标浏览器支持flexbox，因此学习它是值得的。
这不支持IE7。您不应该支持IE7。这样做会继续使用户面临未修复的安全漏洞，并使所有其他Web开发人员的生活更加困难，因为它减轻了用户和组织转向更安全的现代浏览器的压力。
这个clearfix是由Thierry Koblentz在2012年7月宣布并解释的。它从Nicolas Gallagher的2011年微清除中去掉了不必要的重量。在此过程中，它为您自己的使用释放了一个伪元素。这已更新为使用display:block而不是display:table（再次感谢Thierry Koblentz）。
我建议使用以下内容，这是从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;
}
overflow属性可用于清除无需额外标记的浮动：
.container { overflow: hidden; }
这适用于所有浏览器，除了IE6，你只需要启用hasLayout（我首选的方法是使用zoom）：
.container { zoom: 1; }
overflow:hidden 的作用是裁剪内容；它的副作用是清除容器。;-) - Tamlynheight=0 设置，并且你的DOM-树中的第一个元素具有"class clearfix"类，那么你的页面底部始终会有12像素的边距 :)/* float clearing for everyone else */
.clearfix:after{
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
现在它是YAML-Layout的一部分... 看看它吧 - 非常有趣！ http://www.yaml.de/en/home.html
这是一个非常整洁的解决方案：
/* 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保持视觉一致性。
overflow: hidden）。 - Simon EastBootstrap中的Clearfix：
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
.clear:after{
clear: both;
content: "";
display: block;
}
兼容IE8+，效果最佳 :)
……使用浮动元素进行布局越来越不鼓励，更好的替代方案也越来越多……
除了浮动之外，还有其他好的（有时更好的）选择。随着技术的进步和改进，flexbox （以及其他方法）将被广泛采用，浮动将成为一个不好的记忆。也许CSS4？
首先，有时候你可能认为你的html布局是安全的，直到你的救生圈被刺破，你的html流开始下沉：
在下面的Codepen http://codepen.io/omarjuvera/pen/jEXBya 中，使用 <div classs="clear"></div>（或其他元素）来清除浮动是常见的做法，但是这种方法受到反对并且违反语义化。
<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>
CSS
div {
border: 1px solid #f00;
width: 200px;
height: 100px;
}
div.floated {
float: left;
}
.clear {
clear: both;
}
section {
border: 1px solid #f0f;
}
为什么你应该关注这个问题？ 大约80%（或更多）的使用设备是具有小屏幕的移动设备。桌面电脑/笔记本电脑不再是主导。
浮动布局存在的问题不仅仅是这一个。虽然有些人可能会说你只需要将浮动元素放在容器中即可解决问题，但正如你在codepen和图示中看到的那样，情况并非如此。这似乎使情况变得更糟:
HTML
<div id="container" class="">
<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
</div> <!-- /#conteiner -->
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>
CSS
#container {
min-height: 100px; /* To prevent it from collapsing */
border: 1px solid #0f0;
}
.floated {
float: left;
border: 1px solid #f00;
width: 200px;
height: 100px;
}
.clear {
clear: both;
}
section {
border: 1px solid #f0f;
}
关于结果呢？
它完全一样！
至少你知道，你会开始一个CSS派对，邀请各种选择器和属性参加派对；让你的CSS变得比你开始时更混乱。只是为了修复你的浮动问题。
这个简单而非常适应的CSS代码是一个美丽和“救世主”：
.clearfix:before, .clearfix:after {
content: "";
display: table;
clear: both;
zoom: 1; /* ie 6/7 */
}
就是这样！它确实可以在不破坏语义的情况下工作，我还提到了它可以工作吗？：
来自同一样本...HTML
<div class="clearfix">
<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
</div>
<section>Below</section>
CSS
div.floated {
float: left;
border: 1px solid #f00;
width: 200px;
height: 100px;
}
section {
border: 4px solid #00f;
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
clear: both;
zoom: 1; /* ie 6/7 */
}
<div classs="clear"></div> <!-- 作为隔板 --> 以满足语义要求，这并不是唯一的好处。这个clearfix对于任何屏幕大小都是响应式的，在其最简单的形式中不使用 @media。换言之，它将保持您的浮动容器受控，并防止洪水泛滥。最后，它为旧版本的浏览器提供了支持，所有这些功能都只需一个小小的清除浮动（clearfix） =)。
.clearfix:before, .clearfix:after {
content: "";
display: table;
clear: both;
zoom: 1; /* ie 6/7 */
}