什么是clear发生？

最近我浏览了一些网站的代码，发现每个<div>都有一个类clearfix。

经过快速的谷歌搜索，我了解到它有时是针对IE6的，但是实际上是什么？

您能否提供一些带有clear补丁的布局的示例，与没有clear补丁的布局相比？

698100 次浏览
小开
最佳答案

如果你不需要支持IE9或更低版本，你可以自由使用flexbox，不需要使用浮动布局。

值得注意的是，今天，使用浮动元素进行布局越来越不鼓励使用更好的替代方案。

  • display: inline-block更好
  • Flexbox-最佳（但有限的浏览器支持）

Flexbox支持Firefox 18，Chrome21，Opera 12.10和Internet Explorer 10，Safari6.1（包括移动Safari）和Android的默认浏览器4.4。

有关详细的浏览器列表，请参阅：https://caniuse.com/flexbox。

（也许一旦它的位置完全确立，它可能是绝对推荐的布局元素的方式。

Clear是元素到自动清除其子元素的一种方式，因此您不需要添加额外的标记。它通常用于浮动布局，其中元素被浮动以水平堆叠。

clear补丁是一种对抗浮动元素零高度容器问题的方法

清除修复执行如下：

.clearfix::after {content: " "; /* Older browser do not support empty content */visibility: hidden;display: block;height: 0;clear: both;}

或者，如果您不需要IE<8支持，以下也可以：

.clearfix::after {content: "";display: table;clear: both;}

通常您需要执行以下操作：

<div><div style="float: left;">Sidebar</div><div style="clear: both;"></div> <!-- Clear the float --></div>

使用clearFix，您只需要以下内容：

<div class="clearfix"><div style="float: left;" class="clearfix">Sidebar</div><!-- No Clearing div! --></div>

阅读关于它本文-作者：Chris Coyer@CSS-Tricks

小开

其他答案是正确的。但我想补充的是，这是人们第一次学习CSS的时代的遗迹，并滥用float来完成所有布局。float的意思是在长时间的文本旁边执行浮动图像等操作，但很多人将其用作他们的主要布局机制。由于它并不是真正的目的，你需要像“clear发生”这样的黑客来使其工作。

如今，display: inline-block是一个可靠的替代方案（除了IE6和IE7），尽管更现代的浏览器在flexbox、网格布局等名称下提供了更有用的布局机制。

小开

CSS基于浮动的布局中常用的一种技术是将一些CSS属性分配给您知道将包含浮动元素的元素。该技术通常使用名为clearfix的类定义实现，（通常）实现以下CSS行为：

.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;zoom: 1}

这些组合行为的目的是创建一个容器:after活动元素，其中包含一个标记为隐藏的“.”，这将清除所有先前存在的浮点数并有效地重置下一个内容的页面。

小开

这里有一个不同的方法同样的事情，但有点不同

区别是内容点被替换为\00A0==whitespace

更多关于这个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}

这是一个紧凑的版本… 

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

clearfix允许容器包装其浮动子级。如果没有clearfix或等效样式，容器不会包装其浮动子级并折叠，就像其浮动子级被绝对定位一样。

clear补丁有多个版本，其中尼古拉斯·加拉格尔和Thierry Koblentz是关键作者。

如果你想支持旧的浏览器，最好使用这个clear补丁：

.clearfix:before, .clearfix:after {content: "";display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}

在SCSS中，您可以使用以下技术：

%clearfix {&:before, &:after {content:" ";display:table;}
&:after {clear:both;}
& {*zoom:1;}}
#clearfixedelement {@extend %clearfix;}

如果你不关心支持旧的浏览器，有一个较短的版本：

.clearfix:after {content:"";display:table;clear:both;}
小开

简单地说，ClearFix是个黑客。

这是我们所有人都必须忍受的丑陋事情之一，因为它确实是确保浮动子元素不会溢出其父元素的唯一合理方法。还有其他布局方案，但浮动在当今的网页设计/开发中太司空见惯了，不能忽视clearFix hack的价值。

我个人倾向于Micro ClearFix解决方案（Nicolas Gallagher）

.container:before,.container:after {content:"";display:table;}.container:after {clear:both;}.container {zoom:1; /* For IE 6/7 (trigger hasLayout) */}

引用

小开

另一个（也许也是最简单的）实现清除修复的选项是在包含元素上使用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>

当然，这只能在您不希望内容溢出的情况下使用。

小开

我尝试了已接受的答案，但内容对齐仍然存在问题。添加如下所示的“：之前”选择器可修复问题：

// LESS HELPER.clearfix(){&:after, &:before{content: " "; /* Older browser do not support empty content */visibility: hidden;display: block;height: 0;clear: both;}}

LESS以上将编译为下面的CSS：

clearfix:after,clearfix:before {content: " ";/* Older browser do not support empty content */visibility: hidden;display: block;height: 0;clear: both;}
小开

提供2017年第二季度的最新情况。

新的CSS3显示属性在Firefox 53、Chrome58和Opera 45中可用。 

.clearfix {display: flow-root;}

在此处查看任何浏览器的可用性：http://caniuse.com/#feat=flow-root

元素（显示属性设置为flow-root）生成一个块容器框，并使用流布局布局其内容。它总是为其内容建立一个新的块格式上下文。

这意味着如果您使用包含一个或多个浮动子级的父级div，则此属性将确保父级包含其所有子级。不需要任何clear出任黑客。在任何子级上，甚至也不需要最后一个虚拟元素（如果您在最后一个子级上使用clear出任变体：之前）。 

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


提交答案