为什么清浮动？清浮动的方法是什么？哪一种是终极方法？

浮动(float)，1个我们即爱又恨的属性。爱，由于通过浮动，我们能很方便地布局； 恨，浮动以后遗留下来太多的问题需要解决，特别是IE6⑺（以下无特殊说明均指 windows 平台的 IE阅读器）。或许很多人都有这样的疑问，浮动从何而来？我们为什么要清除浮动？清除浮动的原理是甚么？本文将1步1步地深入剖析其中的奥秘，让浮动使用起来更加得心应手。 
1、清除浮动 还是 闭合浮动 （Enclosing float orClearing float）？ 
很多人都已习惯称之为清除浮动，之前我也1直这么叫着，但是确切地来讲是不准确的。我们应当用严谨的态度来对待代码，也能更好地帮助我们理解开头的3个问题。 
1）清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none； 
2）闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。 
二者的区分 请看优雅的 Demo 
通过以上实例发现，其实我们想要到达的效果更确切地说是闭合浮动，而不是单纯的清除浮动，在footer上设置clear：both清除浮动其实不能解决warp高度塌陷的问题。 
结论：用闭合浮动比清除浮动更加严谨，所以后文中统1称之为：闭合浮动。 
2、为什么要清除浮动？ 
要解答这个问题，我们得先说说CSS中的定位机制：普通流，浮动，绝对定位 （其中"position:fixed"是 "position:absolute" 的1个子类）。 
1）普通流：很多人或文章称之为文档流或普通文档流，其实标准里根本就没有这个词。如果把文档流直译为英文就是 document flow ，但标准里只有另外一个词，叫做 普通流 （normal flow)，或称之为常规流。但似乎大家更习惯文档流的称呼，由于很多中文翻译的书就是这么来的。比如《CSS Mastery》，英文原书中至始至终都只有普通流 normal flow（普通流） 这1词，历来没出现过document flow （文档流） 
2）浮动：浮动的框可以左右移动，直至它的外边沿遇到包括框或另外一个浮动框的边沿。浮动框不属于文档中的普通流，当1个元素浮动以后，不会影响到 块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在1样，当浮动框高度超越包括框的时候，也就会出现包括框不会 自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云1样，但是只能左右浮动。 
正是由于浮动的这类特性，致使本属于普通流中的元素浮动以后，包括框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，常常这其实不是我们所希望的，所以需要闭合浮动元素，使其包括框表现出正常的高度。 
绝对定位就不多说了，不在本文讨论范围以内，下回分解。 
3、清除浮动的原理——了解 hasLayout 和 Block formattingcontexts 
先看1下清算浮动的各种方法： 
1）添加额外标签 
这是在学校老师就告知我们的 1种方法，通过在浮动元素末尾添加1个空的标签例如 <div style=”clear:both”></div>，其他标签br等亦可。 

复制代码

代码以下:

<div class="warp" id="float1"> 
<h2>1）添加额外标签</h2> 
<div class="main left">.main{float:left;}</div> 
<div class="side left">.side{float:right;}</div> 
<div style="clear:both;"></div> 
</div> 
<div class="footer">.footer</div> 
/[code] 
优点：通俗易懂，容易掌握 
缺点：可以想象通过此方法，会添加多少无意义的空标签，有背结构与表现的分离，在后期保护中将是噩梦，这是坚决不能忍耐的，所以你看了这篇文章以后还是建议不要用了吧。 
2）使用 br标签和其本身的 html属性 
这个方法有些小众，br 有 clear=“all | left| right | none” 属性 
[code] 
<div class="warp" id="float2"> 
<h2>2）使用 br标签和其本身的 html属性</h2> 
<div class="main left">.main{float:left;}</div> 
<div class="side left">.side{float:right;}</div> 
<br clear="all" /> 
</div> 
<div class="footer">.footer</div> 

优雅的 Demo 
优点：比空标签方式语义稍强，代码量较少 
缺点：一样有背结构与表现的分离，不推荐使用 
3)父元素设置 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会致使中键失效，这是我作为1个多标签阅读控所不能接受的。所以还是不要使用了 
4)父元素设置 overflow：auto 属性 
一样IE6需要触发hasLayout，演示和3差不多 
优点：不存在结构和语义化问题，代码量极少 
缺点：多个嵌套后，firefox某些情况会造成内容全选；IE中 mouseover 造成宽度改变时会出现最外层模块有转动条等，firefox初期版本会无故产生focus等, 请看 嗷嗷的 Demo ,不要使用 
5）父元素也设置浮动 
优点：不存在结构和语义化问题，代码量极少 
缺点：使得与父元素相邻的元素的布局会遭到影响，不可能1直浮动到body，不推荐使用 
6）父元素设置display:table 
优雅的 Demo 
优点：结构语义化完全正确，代码量极少 
缺点：盒模型属性已改变，由此酿成的1系列问题，得不偿失，不推荐使用 
7）使用:after 伪元素 
需要注意的是 :after是伪元素（Pseudo-Element），不是伪类（某些CSS手册里面称之为“伪对象”），很多清除浮动大全之类的文章都称之为伪类，不过csser要严谨1点，这是1种态度。 
由于IE6⑺不支持:after，使用 zoom:1触发 hasLayout。 
该方法源自于: How To Clear Floats Without StructuralMarkup 
原文全部代码以下: 

复制代码

代码以下:

<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; } 

优点：结构和语义化完全正确,代码量居中 
缺点：复用方式不当会造成代码量增加 
小结 
通过对照，我们不难发现，其实以上罗列的方法，不过有两类： 
其1，通过在浮动元素的末尾添加1个空元素，设置 clear：both属性，after伪元素其实也是通过 content 在元素的后面生成了内容为1个点的块级元素； 
其2，通过设置父元素 overflow 或display：table属性来闭合浮动，我们来探讨1下这里面的原理。 
在CSS2.1里面有1个很重要的概念，但是国内的技术博客介绍到的比较少，那就是 Block formatting contexts （块级格式化上下文），以下简称 BFC。 
CSS3里面对这个规范做了改动，称之为：flow root，并且对触发条件进行了进1步说明。 
那末如何触发BFC呢？ 
float 除none之外的值 
overflow 除visible 之外的值（hidden，auto，scroll ） 
display (table-cell，table-caption，inline-block) 
position（absolute，fixed） 
fieldset元素 
需要注意的是，display:table 本身其实不会创建BFC，但是它会产生匿名框(anonymous boxes)，而匿名框中的display:table-cell可以创建新的BFC，换句话说，触发块级格式化上下文的是匿名框，而不是 display:table。所以通过display:table和display:table-cell创建的BFC效果是不1样的。 
fieldset 元素在www.w3.org里目前没有任何有关这个触发行动的信息，直到HTML5标准里才出现。有些阅读器bugs（Webkit，Mozilla）提到过这个触发行动，但是没有任何官方声明。实际上，即便fieldset在大多数的阅读器上都能创建新的块级格式化上下文，开发者也不应当把这当作是天经地义的。CSS 2.1没有定义哪一种属性适用于表单控件，也没有定义如何使用CSS来给它们添加样式。用户代理可能会给这些属性利用CSS属性，建议开发者们把这类支持当作实验性质的，更高版本的CSS可能会进1步规范这个。 
BFC的特性： 
1)块级格式化上下文会禁止外边距叠加 
当两个相邻的块框在同1个块级格式化上下文中时，它们之间垂直方向的外边距会产生叠加。换句话说，如果这两个相邻的块框不属于同1个块级格式化上下文，那末它们的外边距就不会叠加。 
2)块级格式化上下文不会堆叠浮动元素 
根据规定，1个块级格式化上下文的边框不能和它里面的元素的外边距堆叠。这就意味着阅读器将会给块级格式化上下文创建隐式的外边距来禁止它和浮动元素的外边距叠加。由于这个缘由，当给1个挨着浮动的块级格式化上下文添加负的外边距时将会不起作用（Webkit和IE6在这点上有1个问题——可以看这个测试用例）。 
3)块级格式化上下文通常可以包括浮动 
详见： W3C CSS2.1 - 10.6.7 'Auto' heights forblock formatting context roots 
通俗地来讲：创建了 BFC的元素就是1个独立的盒子，里面的子元素不会在布局上影响外面的元素，反之亦然，同时BFC任然属于文档中的普通流。 
至此，您也许明白了为何 overflow:hidden或auto可以闭合浮动了，真是由于父元素创建了新的BFC。对张鑫旭在对《overflow与zoom”清除浮动”的1些认识 》1文中对用包裹来解释闭合浮动的原理，我觉得是不够严谨的，而且没有根据。并且说道“Firefox等阅读器并没有haslayout的概念”，那末现代阅读器是有BFC的，从表现上来讲，hasLayout 可以同等于 BFC。 
IE6⑺的显示引擎使用的是1个称为布局（layout）的内部概念，由于这个显示引擎本身存在很多的缺点，直接致使了IE6⑺的很多显示 bug。当我们说1个元素“得到 layout”，或说1个元素“具有 layout” 的时候，我们的意思是指它的微软专有属性 hasLayouthttp://msdn.microsoft.com/worksh ... rties/haslayout.asp 为此被设为了 true 。IE6⑺使用布局的概念来控制元素的尺寸和定位，那些具有布局（have layout）的元素负责本身及其子元素的尺寸设置和定位。如果1个元素的 hasLayout 为false，那末它的尺寸和位置由最近具有布局的先人元素控制。 
触发hasLayout的条件： 
position: absolute 
float: left|right 
display: inline-block 
width: 除 “auto” 外的任意值 
height: 除 “auto” 外的任意值 （例如很多人清除浮动会用到 height: 1% ） 
zoom: 除 “normal” 外的任意值 (MSDN)http://msdn.microsoft.com/worksh ... properties/zoom.asp 
writing-mode: tb-rl (MSDN)http://msdn.microsoft.com/worksh ... ies/writingmode.asp 
在 IE7 中，overflow 也变成了1个 layout 触发器： 
overflow: hidden|scroll|auto （ 这个属性在IE之前版本中没有触发 layout 的功能。 ） 
overflow-x|-y: hidden|scroll|auto （CSS3 盒模型中的属性，还没有得到阅读器的广泛支持。他们在之前IE版本中一样没有触发 layout 的功能） 
hasLayout更详细的解释请参见 old9翻译的 大名鼎鼎的 《On having layout》1文（英文原文：http://www.satzansatz.de/cssd/onhavinglayout.htm），由于old9博客被墙，中文版地址： 
IE8使用了全新的显示引擎，据称不使用 hasLayout属性了，因此解决了很多深恶痛绝的bug。 
综上所述： 
在支持BFC的阅读器（IE8+，firefox，chrome，safari）通过创建新的BFC闭合浮动； 
在不支持 BFC的阅读器 （IE6⑺），通过触发 hasLayout 闭合浮动。 
4、闭合浮动方法——精益求精 
上面已罗列了7种闭合浮动的方法，通过第3节分析的原理，我们发现其实更多的：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:"."生成内容作为最后1个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",有些版本可能content 里面内容为空,1丝冰冷是不推荐这样做的,firefox直到7.0content:”" 依然会产生额外的空隙； 
5）zoom：1 触发IE hasLayout。 
通过分析发现，除clear：both用来清除浮动的，其他代码不过都是为了隐藏掉content生成的内容，这也就是其他版本的闭合浮动为何会有font-size：0，line-height：0。 
精益求精方案1： 
相对空标签闭合浮动的方法代码似乎还是有些冗余，通过查询发现Unicode字符里有1个“零宽度空格”，也就是U+200B ，这个字符本身是不可见的，所以我们完全可以省略掉 visibility:hidden了 

复制代码

代码以下:

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

精益求精方案2： 
由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呢？为何方案1没有呢？其实它是用来处理margin边距堆叠的，由于内部元素 float 创建了BFC，致使内部元素的margin-top和 上1个盒子的margin-bottom 产生叠加。如果这不是你所希望的，那末就能够加上before，如果只是单纯的闭合浮动，after就够了！其实不是犹如大漠《Clear Float》1文所说的：但只使用clearfix:after时在跨阅读器兼容问题会存在1个垂直边距叠加的bug，这不是bug，是BFC应当有的特性。 
在实际开发中，改进方案1由于存在Unicode字符不合适内嵌CSS的GB2312编码的页面，使用方案7完全可以解决我们的需求了，改进方案2等待大家的进1步实践。方案3、4通过overflow闭合浮动，实际上已创建了新的 块级格式化上下文，这将致使其布局和相对浮动的行动等产生1系列的变化，清除浮动只不过是1系列变化中的1个作用而已。所以为了闭合浮动去改变全局特性，这是不明智的，带来的风险就是1系列的bug，比如firefox 初期版本产生 focus，截断绝对定位的层等等。始终要明白，如果单单只是需要闭合浮动，overflow就不要使用，而不是某些文章所说的“慎用”。 

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠