【总结性】用哪种方式清除浮动最好?
发布在前端搬运工2013年12月21日view:3886
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

原文地址:http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best

问题:

有个问题困扰我很久了。代码如下:

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

用一个container包裹一个两栏布局,并让sidebar浮动,这样的话container将不能包裹住contentsidebar.

我知道有几种方式可以用来清楚浮动:

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

请问:最可靠的清除浮动的最佳实践是什么?

回答:

根据设计稿的不同,下面的每一种清除浮动的方案各有优点。

  • Micro-Clearfix [2011]

这是一种更简单,更现代化的方式(至少目前来看是这样)

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

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

这种方法适用于:当定位内容(positioned content)不会出现在容器边界之外的情况。

http://www.quirksmode.org/css/clearing.html展示了如何用overflow属性清除浮动,即:设置容器的width: 100%

.container {
    overflow: hidden;
    display: inline-block; /* Necessary to trigger "hasLayout" in IE */
    display: block; /* Sets element back to block */
}

为了在IE中触发hasLayout,除了可以使用display属性,也可以使用其它可以触发hasLayout的属性(例如:下面的代码使用zoom属性来触发hasLayout)。关于触发hasLayout.

.container {
    overflow: hidden; /* Clearfix! */
    zoom: 1;  /* Triggering "hasLayout" in IE */
    display: block; /* Element must be a block to wrap around contents. Unnecessary if only using block-level elements. */
}

overflow属性清除浮动的另一种方式就是使用 underscore hack。IE会识别带下划线的属性,而其它浏览器则不会。zoom用来在IE中触发hasLayout

.container {
    overflow: hidden;
    _overflow: visible; /* for IE */
    _zoom: 1; /* for IE */
}

尽管使用underscore hack同样可以达到效果,但最好还是别用hacks

  • ”:after” Pseudo-element

这是一种较早的清除浮动的方法,被称作Easy Clearing。它的优点是允许定位元素(positioned elements)跑到容器边界之外。代价是更加复杂的CSS。

http://www.positioniseverything.net/easyclearing.html

.container {
    display: inline-block;
}
.container:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;
}
.container {
    display: block;
}
  • Element using “clear” property

这是一种快速但粗暴的解决方式:

< br style="clear:both" /><!-- So dirty! -->

用这种方式很不优雅,理由如下:

  • 增加了html文件体积,会导致
  • 网站加载速度变慢,并且
  • 多余的标签没有任何语义,同时
  • 让你的代码看起来不专业

Choose wisely. =)

评论
发表评论
暂无评论
WRITTEN BY
HtmlCssJs
Keep your sanity in this crazy frontend world
TA的新浪微博
PUBLISHED IN
前端搬运工

翻译一些前端相关的文章。来源有 http://stackoverflow.com/questions/tagged/css?sort=voteshttp://www.smashingmagazine.com/ 等等。。大家也可以把看起来不错的英文链接发给我,我尝试翻译下

我的收藏