clear,clearfix,清除浮动

清除浮动和闭合浮动

1. 清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none；
2. 闭合浮动：使浮动元素闭合，从而减少浮动带来的影响。

WHY清除浮动

CSS中的定位机制：普通流，浮动，绝对定位 （其中"position:fixed" 是 "position:absolute" 的一个子类）。

1. 普通流：很多人或者文章称之为文档流或者普通文档流，其实标准里根本就没有这个词。如果把文档流直译为英文就是 document flow ，但标准里只有另一个词，叫做普通流叫做（normal flow)，或者称之为常规流。但似乎大家更习惯文档流的称呼，因为很多中文翻译的书就是这么来的。比如《CSS Mastery》，英文原书中至始至终都只有普通流 normal flow（普通流） 这一词，从来没出现过document flow （文档流）
2. 浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到 块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会 自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。（是我们不想看到的，所以要清除和闭合和浮动）

清除浮动

• 添加额外标签：

通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，其他标签br等亦可

使用 br标签和其自身的 html属性，<br clear="all" />

优点：通俗易懂，容易掌握

缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦

• 父元素设置overflow：hidden

通过设置父元素overflow值设置为hidden；在IE6中还需要触发 hasLayout ，例如 zoom：1；

 

 <div class="warp" id="float3" style="overflow:hidden; *zoom:1;">

<h2>3)父元素设置 overflow </h2>

<div class="main left">.main{float:left;}</div>

<div class="side left">.side{float:right;}</div>

</div>

<div class="footer">.footer</div>

 优点：不存在结构和语义化问题、代码量极少。

 

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素；04年POPO就发现overflow:hidden会导致中键失效，这是我作为一个多标签浏览控所不能接受的。所以还是不要使用了。

• 父元素设置 overflow：auto 属性

同样IE6需要触发hasLayout，演示和3差不多

优点：不存在结构和语义化问题，代码量极少

 

缺点：多个嵌套后，firefox某些情况会造成内容全选；IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等，firefox早期版本会无故产生focus等, 请看 嗷嗷的 Demo ,不要使用

 

• 父元素也设置浮动

优点：不存在结构和语义化问题，代码量极少

缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用

• 使用:after 伪元素

需要注意的是 :after是伪元素（Pseudo-Element），不是伪类（某些CSS手册里面称之为“伪对象”），很多清除浮动大全之类的文章都称之为伪类，不过csser要严谨一点，这是一种态度。

 

由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

 

 该方法源自于: How To Clear Floats Without Structural Markup

 

原文全部代码如下:

 

<style type="text/css"> 
.clearfix:after { 
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden; 
} 
 .clearfix {display: inline-block;}  /* for IE/Mac */  
</style>
<!--[if IE]> <style type="text/css">
.clearfix {zoom: 1;/* triggers hasLayout */ 
display: block;/* resets display for IE/Win */}
</style> 
<![endif]-->

 鉴于 IE/Mac的市场占有率极低,我们直接忽略掉,最后精简的代码如下:

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

.clearfix { *zoom:1; }

 优点：结构和语义化完全正确,代码量居中

缺点：复用方式不当会造成代码量增加

精益求精

上面已经列举了7种闭合浮动的方法，通过第三节分析的原理，我们发现其实更多的：display：table- cell，display：inline-block等只要触发了BFC的属性值都可以闭合浮动。从各个方面比较，after伪元素闭合浮动无疑是相对比 较好的解决方案了，下面详细说说该方法。

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

.clearfix { *zoom:1; }

1.  display:block 使生成的元素以块级元素显示,占满剩余空间;
2. height:0 避免生成内容破坏原有布局的高度。
3. visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;
4. 通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙；
5. zoom：1 触发IE hasLayout。

通过分析发现，除了clear：both用来清除浮动的，其他代码无非都是为了隐藏掉content生成的内容，这也就是其他版本的闭合浮动为什么会有font-size：0，line-height：0。

精益求精方案一：

.clearfix:after {content:"\200B"; display:block; height:0; clear:both; }

.clearfix { *zoom:1; }.

 

精益求精方案二：

由Nicolas Gallagher 大湿提出来的,原文:A new micro clearfix hack，该方法也不存在firefox中空隙的问题。

/* For modern browsers */

.cf:before,.cf:after {

content:"";

display:table;

}

.cf:after { clear:both; }/* For IE 6/7 (trigger hasLayout) */

.cf { zoom:1; }

 

需要注意的是：

上面的方法用到了  ：before伪元素，很多人对这个有些迷惑，到底我什么时候需要用before呢？为什么方案一没有呢？其实它是用来处理margin边距重叠的，由于 内部元素 float 创建了BFC，导致内部元素的margin-top和 上一个盒子的margin-bottom 发生叠加。如果这不是你所希望的，那么就可以加上before，如果只是单纯的闭合浮动，after就够了！并不是如同大漠《Clear Float》一文所说的：但只使用clearfix:after时在跨浏览器兼容问题会存在一个垂直边距叠加的bug，这不是bug，是BFC应该有的特性。

 

 

原文链接：http://www.cnblogs.com/mofish/archive/2012/05/14/2499400.html

原文参考文章：

• Page breaks and block-formatting contexts: Allowed page breaks (13.3.3)
• Clearfix and block formatting contexts: Everything you Know about Clearfix is Wrong
• Block formating contexts, “hasLayout” – IE Window vs CSS2.1 browsers: simulations.
• New block formatting contexts next to floats
• Control Block Formatting Context
• On having layout， [译文]On having layout  http://old9.blogsome.com/2006/04/11/onhavinglayout
• “HasLayout” Overview
• hasLayout Property
• IE hasLayout
• https://developer.mozilla.org/en/CSS/block_formatting_context

 番外整理：

• 最优浮动闭合方案（这是我们推荐的）：

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

用法很简单，在浮动元素的父云素上添加class=”demo clearfix”。

• 你会发现这个办法也有个弊端，但的确是小问题。改变css写法就ok了：

.demo:after,.demo2:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.demo,.demo2{*+height:1%;}

 以上写法就避免了改变html结构，直接用css解决了。

• 拉风的写法：

.clearfix{overflow:auto;_height:1%}

•  前段牛提供的

.clearfix{overflow:hidden;_zoom:1;}