根据所产生的设计,以下每个 clearfix CSS 解决方案都有其自己的优点。
该 clearfix 确实具有有用的应用程序,但也已被用作 hack。在使用 clearfix 之前,也许这些现代的 CSS 解决方案可能会有用:
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>
缺点是,在外部元素上使用 margin 和 padding 的某些组合会导致出现滚动条,但是可以通过将 margin 和 padding 放在另一个包含父元素的元素上来解决。
使用'overflow:hidden' 也是一个 clearfix 解决方案,但是没有滚动条,但是使用hidden
将裁剪位于包含元素之外的所有内容。
注意:在此示例中,float 元素是img
标签,但也可以是任何 html 元素。
Thierry Koblentz 在 CSSMojo 上写道: 重新加载了最新的 clearfix 。他指出,通过放弃对 oldIE 的支持,该解决方案可以简化为一个 CSS 语句。此外,当带有 clearfix 的元素是同级元素时,使用display: block
(而不是display: table
)可以使边距正确折叠。
.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 还提供了:“ 提醒您:如果您从头开始一个新项目,请继续,但不要将这种技术与您现有的技术互换,因为即使您不支持 oldIE,您现有的规则也会阻止您利润下降。”
Nicolas Gallagher 的最新的 Clearfix 解决方案,即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%
。
.container {
overflow: hidden;
display: inline-block;
display: block;
}
除了使用display
属性为 IE 设置 “hasLayout” 外,其他属性也可以用于触发元素的 “hasLayout” 。
.container {
overflow: hidden;
zoom: 1;
display: block;
}
使用overflow
属性清除浮点数的另一种方法是使用下划线 hack 。 IE 将应用带下划线前缀的值,其他浏览器则不会。 zoom
属性触发 IE 中的hasLayout :
.container {
overflow: hidden;
_overflow: visible; /* for IE */
_zoom: 1; /* for IE */
}
虽然可行,但使用骇客并不理想。
这种较旧的 “轻松清除” 方法的优点是,允许定位的元素悬挂在容器的边界之外,但以更复杂的 CSS 为代价。
该解决方案已经很老了,但是您可以了解有关 “位置即一切” 的轻松清算的全部信息: 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%
display: inline-block
。 (当然, 通常需要注意的是使用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
),但不会建立新的块格式化上下文。这意味着事情不会在所有情况下都一样。有关为什么这样做不好的解释,请参阅有关 Clearfix 的所有知识都是错误的 。
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)。
我建议使用以下内容,该内容取自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;
}
溢出属性可用于清除浮点数,而无需额外的标记:
.container { overflow: hidden; }
这适用于除 IE6 之外的所有浏览器,您需要做的就是启用 hasLayout(缩放是我的首选方法):
.container { zoom: 1; }
我在官方的 CLEARFIX 方法中发现了一个错误:DOT 没有字体大小。而且,如果您将height = 0
设置为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
这是一个很整洁的解决方案:
/* 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;
}
我只用:-
.clear:after{
clear: both;
content: "";
display: block;
}
效果最好,并且与 IE8 + 兼容:)
鉴于大量的回复,我不愿发表。但是,这种方法可能确实对我有所帮助。
值得一提的是,我避免像埃博拉病毒那样漂浮。原因很多,我并不孤单。阅读 Rikudo 答案,了解什么是 clearfix ,您将明白我的意思。用他自己的话说: ...the use of floated elements for layout is getting more and more discouraged with the use of better alternatives...
除了浮动以外,还有其他好的(有时更好)的选择。随着技术的进步和改进, flexbox (和其他方法)将被广泛采用,并且浮动将成为不好的记忆。也许是 CSS4?
首先,有时候,您可能会认为自己是安全的,直到救生员被刺破并且 html 流开始下沉为止:
在下面的 Codepen http://codepen.io/omarjuvera/pen/jEXBya中,使用<div classs="clear"></div>
(或其他元素)清除浮点数的做法很常见,但对此却不予理 and 并反语义。
<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;
}
但是 ,就在您认为自己的浮子值得扬帆的时候…… 轰!随着屏幕尺寸越来越小,您会看到如下图所示的奇怪行为(相同的http://codepen.io/omarjuvera/pen/jEXBya ):
你为什么要在乎呢?我不确定确切的数字,但使用的设备中约有 80%(或更多)是带有小屏幕的移动设备。台式机 / 笔记本电脑不再是国王。
这不是浮点数的唯一问题。有很多,但在此示例中,有些人可能会说, all you have to do is to place your floats in a container
。但是正如您在代码笔和图形中所看到的,情况并非如此。这显然使事情变得最糟:
的 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> <!-- Acts as a wall -->
并使语义警察满意。这不是唯一的好处。该 clearfix 可以响应任何屏幕尺寸,而无需使用最简单形式的@media
。换句话说,它将使您的浮动容器处于检查状态并防止水浸。最后,它在一小手空手道中就为所有旧浏览器提供了支持 =)
.clearfix:before, .clearfix:after {
content: "";
display: table;
clear: both;
zoom: 1; /* ie 6/7 */
}