clearfix - 哪种clearfix方法是最好的呢?

  显示原文与译文双语对照的内容

我有一个 div 包装two-column布局的古老问题。 我的侧边栏被浮动,所以我的容器 div 无法包装内容和边栏。


<div id="container">
 <div id="content"></div>
 <div id="sidebar"></div>
</div>

在 Bug 中修复清除的方法似乎有很多:

  • <br clear="all"/>
  • overflow:auto
  • overflow:hidden
  • 等等.

但在我看来,唯一能正常工作的是 <br clear="all"/> 解决方案,它有点脏。 overflow:auto 给我提供了讨厌的滚动条,overflow:hidden 肯定有副作用。 另外,IE7显然应该不会因为它的错误行为而遭受这个问题,但在我的情况下,它与 FF 。

目前最可靠的best-practice方法是什么?

时间:

我们要解决的问题是什么?

浮动内容有两个重要的注意事项:

  1. 包含后代浮动。这意味着有问题的要素使得本身对它封装所有浮动后代个子够高的。 ( 它们不会挂在外面。)

    Floating content hanging outside its container

  2. 从外部浮动的绝缘后代。 这意味着元素内部的后代应该能够使用 clear: both,并且它不能与元素之外的浮动交互。

     <code> clear: both </code> interacting with a float elsewhere in the DOM

块格式上下文

只有一种方法可以做到这两个。 这就是建立一个新的块格式上下文编辑器。 建立块格式上下文的元素是一个绝缘矩形,其中浮动与彼此交互。 块格式化上下文将总是足够高,以可视化地包装它的浮动后代,并且块格式上下文之外的不可以与内部的元素交互。 这种双向绝缘正是你想要的。 在 IE 中,这个概念叫做 hasLayout,它可以通过 zoom: 1 设置。

有几种方法可以建立块格式化上下文,但我推荐的解决方案是 display: inline-block 。 ( 当然,有使用 width: 100%通常警告,所以使用 box-sizing: border-box 或者 paddingmarginborder 在不同的元素上。)

最可靠的解决方案

浮动最常见的应用可能是two-column布局。 ( 可以扩展到三列。) 首先标记结构。


<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 和每个人都相关的问题与传统的else, clearfix解决方案是他们使用两个不同的渲染同样的概念得到了 goal. 在 IE 他们使用hasLayout来建立一个新的块格式化内容,但对于其他人,他们使用生成的方块与 clear: both ( :after ),它不会建立新的块格式化上下文。 这意味着一切在所有情况下都不会表现出同样的行为。 有关为什么这一点不好的解释,请查看对Clearfix的所有了解都是错误的。

所使用的新标准,如 Inuit.cssBourbon - 两种应用非常广泛和 well-maintained css/sass框架:


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


便笺

这不支持 IE7.你不应该为IE7支持 关于用户和用户组织到 switch 用于现代browsers,这样做仍然存在以公开为不固定攻击和使之变得难度对于所有其他网络开发人员,因为它减少了 pressure.

在因担心宣布并解释了 Thierry Koblentz. 在对加拉格尔 micro-clearfix · 2011,,它可以用于不必要的实际重量并不重要 在这个过程中,它为你自己的使用释放一个 pseudo-element 。

有时现在已经至少一年没有这里方法被设计出来,和原不便,上面回答问题应更新- 这是很流行的。

我建议使用以下方法,它取自 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; 
}

溢出属性可以用于清除没有附加mark-up的浮动:


.container { overflow: hidden; }

这适用于除IE6之外的所有浏览器,你需要做的就是启用 hasLayout ( 缩放是我的首选方法):


.container { zoom: 1; }

http://www.quirksmode.org/css/clearing.html

官方数据中我发现一个 点没有 font-size 。 而且如果你设置高度= 0第1 个数组元素在你DOM-Tree具有该类"clearfix" 12 px: ) 这时将allways有一个距底部的页面,

你必须像这样修复它:


/* 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 +

之前在现代browsers,包括:选择器不必清除浮动的,但它可以防止 top-margins collapsing. IE 6/7 zoom:1 时applied,这样可以确保硬盘强烈建议检测所以有很明显

来自 http://nicolasgallagher.com/micro-clearfix-hack/

Clearfix来自 Bootstrap:


.clearfix {
 *zoom: 1;
}

.clearfix:before,
.clearfix:after {
 display: table;
 line-height: 0;
 content:"";
}

.clearfix:after {
 clear: both;
}

老实说;所有解决方案似乎都是一个 hack 来修复渲染 Bug 。 我错了?

我发现 <br clear="all"/> 是最简单最简单的。 到处看到 class="clearfix" 不能描边对象的意识相结合人谁来无关的markeup元素还怎么可能? 你只是在不同的画布上绘制问题。

我也使用 display: hidden 解决方案,它很好,不需要额外的类声明或者html标记。。 但是有时候你需要元素来溢出容器,例如。 漂亮的缎带和窗框

...