【转载】那些年我们一起清除过的浮动

sEP上海云路网络科技有限公司

浮动(float)，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局； 恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7（以下无特殊说明均指 windows 平台的 IE浏览器）。也许很多人都有这样的疑问，浮动从何而来？我们为何要清除浮动？清除浮动的原理是什么？本文将一步一步地深入剖析其中的奥秘，让浮动使用起来更加得心应手。sEP上海云路网络科技有限公司

一、清除浮动 还是 闭合浮动 （Enclosing float or Clearing float）？

很多人都已经习惯称之为清除浮动，以前我也一直这么叫着，但是确切地来说是不准确的。我们应该用严谨的态度来对待代码，也能更好地帮助我们理解开头的三个问题。sEP上海云路网络科技有限公司

1）清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none；sEP上海云路网络科技有限公司

2）闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。sEP上海云路网络科技有限公司

两者的区别请看优雅的 DemosEP上海云路网络科技有限公司

通过以上实例发现，其实我们想要达到的效果更确切地说是闭合浮动，而不是单纯的清除浮动，在footer上设置clear：both清除浮动并不能解决warp高度塌陷的问题。 sEP上海云路网络科技有限公司

结论：用闭合浮动比清除浮动更加严谨，所以后文中统一称之为：闭合浮动。sEP上海云路网络科技有限公司

二、为何要闭合浮动？

要解答这个问题，我们得先说说CSS中的定位机制：普通流，浮动，绝对定位 （其中"position:fixed" 是 "position:absolute" 的一个子类）。sEP上海云路网络科技有限公司

1）普通流：很多人或者文章称之为文档流或者普通文档流，其实标准里根本就没有这个词。如果把文档流直译为英文就是 document flow ，但标准里只有另一个词，叫做普通流（normal flow)，或者称之为常规流。但似乎大家更习惯文档流的称呼，因为很多中文翻译的书就是这么来的。比如《CSS Mastery》，英文原书中至始至终都只有普通流 normal flow（普通流）这一词，从来没出现过document flow （文档流）sEP上海云路网络科技有限公司

2）浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。sEP上海云路网络科技有限公司

正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。sEP上海云路网络科技有限公司

绝对定位就不多说了，不在本文讨论范围之内，下回分解。sEP上海云路网络科技有限公司

三、闭合浮动的原理——了解 hasLayout 和 Block formatting contexts

先看一下清理浮动的各种方法：sEP上海云路网络科技有限公司

1）添加额外标签sEP上海云路网络科技有限公司

这是在学校老师就告诉我们的 一种方法，通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，其他标签br等亦可。sEP上海云路网络科技有限公司

<div class="warp" id="float1">sEP上海云路网络科技有限公司

<h2>1）添加额外标签</h2>sEP上海云路网络科技有限公司

<div class="main left">.main{float:left;}</div>sEP上海云路网络科技有限公司

<div class="side left">.side{float:right;}</div>sEP上海云路网络科技有限公司

<div style="clear:both;"></div>sEP上海云路网络科技有限公司

</div>sEP上海云路网络科技有限公司

<div class="footer">.footer</div>sEP上海云路网络科技有限公司

优雅的 DemosEP上海云路网络科技有限公司

优点：通俗易懂，容易掌握sEP上海云路网络科技有限公司

缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦，这是坚决不能忍受的，所以你看了这篇文章之后还是建议不要用了吧。sEP上海云路网络科技有限公司

2）使用 br标签和其自身的 html属性sEP上海云路网络科技有限公司

这个方法有些小众，br 有 clear=“all | left | right | none” 属性sEP上海云路网络科技有限公司

<div class="warp" id="float2">sEP上海云路网络科技有限公司

<h2>2）使用 br标签和其自身的 html属性</h2>sEP上海云路网络科技有限公司

<div class="main left">.main{float:left;}</div>sEP上海云路网络科技有限公司

<div class="side left">.side{float:right;}</div>sEP上海云路网络科技有限公司

<br clear="all" />sEP上海云路网络科技有限公司

</div>sEP上海云路网络科技有限公司

<div class="footer">.footer</div>sEP上海云路网络科技有限公司

优雅的 DemosEP上海云路网络科技有限公司

优点：比空标签方式语义稍强，代码量较少sEP上海云路网络科技有限公司

缺点：同样有违结构与表现的分离，不推荐使用sEP上海云路网络科技有限公司

3)父元素设置 overflow：hiddensEP上海云路网络科技有限公司

通过设置父元素overflow值设置为hidden；在IE6中还需要触发 hasLayout ，例如 zoom：1；sEP上海云路网络科技有限公司

<div class="warp" id="float3" style="overflow:hidden; *zoom:1;">sEP上海云路网络科技有限公司

<h2>3)父元素设置 overflow </h2>sEP上海云路网络科技有限公司

<div class="main left">.main{float:left;}</div>sEP上海云路网络科技有限公司

<div class="side left">.side{float:right;}</div>sEP上海云路网络科技有限公司

</div>sEP上海云路网络科技有限公司

<div class="footer">.footer</div>sEP上海云路网络科技有限公司

优雅的 DemosEP上海云路网络科技有限公司

优点：不存在结构和语义化问题，代码量极少sEP上海云路网络科技有限公司

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

4)父元素设置 overflow：auto 属性sEP上海云路网络科技有限公司

同样IE6需要触发hasLayout，演示和3差不多sEP上海云路网络科技有限公司

优点：不存在结构和语义化问题，代码量极少sEP上海云路网络科技有限公司

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

5）父元素也设置浮动sEP上海云路网络科技有限公司

优点：不存在结构和语义化问题，代码量极少sEP上海云路网络科技有限公司

缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用sEP上海云路网络科技有限公司

6）父元素设置display:tablesEP上海云路网络科技有限公司

优雅的 DemosEP上海云路网络科技有限公司

优点：结构语义化完全正确，代码量极少sEP上海云路网络科技有限公司

缺点：盒模型属性已经改变，由此造成的一系列问题，得不偿失，不推荐使用sEP上海云路网络科技有限公司

7）使用:after 伪元素sEP上海云路网络科技有限公司

需要注意的是 :after是伪元素（Pseudo-Element），不是伪类（某些CSS手册里面称之为“伪对象”），很多闭合浮动大全之类的文章都称之为伪类，不过csser要严谨一点，这是一种态度。sEP上海云路网络科技有限公司

由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。sEP上海云路网络科技有限公司

该方法源自于: How To Clear Floats Without Structural MarkupsEP上海云路网络科技有限公司

原文全部代码如下:sEP上海云路网络科技有限公司

<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的市场占有率极低,我们直接忽略掉,最后精简的代码如下:sEP上海云路网络科技有限公司

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both;}sEP上海云路网络科技有限公司

.clearfix { *zoom:1; }sEP上海云路网络科技有限公司

优雅的 DemosEP上海云路网络科技有限公司

优点：结构和语义化完全正确,代码量居中sEP上海云路网络科技有限公司

缺点：复用方式不当会造成代码量增加sEP上海云路网络科技有限公司

小结sEP上海云路网络科技有限公司

通过对比，我们不难发现，其实以上列举的方法，无非有两类：sEP上海云路网络科技有限公司

其一，通过在浮动元素的末尾添加一个空元素，设置 clear：both属性，after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素；sEP上海云路网络科技有限公司

其二，通过设置父元素 overflow 或者display：table 属性来闭合浮动，我们来探讨一下这里面的原理。sEP上海云路网络科技有限公司

在CSS2.1里面有一个很重要的概念，但是国内的技术博客介绍到的比较少，那就是 Block formatting contexts （块级格式化上下文），以下简称 BFC。sEP上海云路网络科技有限公司

CSS3里面对这个规范做了改动，称之为：flow root，并且对触发条件进行了进一步说明。sEP上海云路网络科技有限公司

那么如何触发BFC呢？sEP上海云路网络科技有限公司

• float 除了none以外的值 sEP上海云路网络科技有限公司
• overflow 除了visible 以外的值（hidden，auto，scroll ） sEP上海云路网络科技有限公司
• display (table-cell，table-caption，inline-block) sEP上海云路网络科技有限公司
• position（absolute，fixed） sEP上海云路网络科技有限公司
• fieldset元素

需要注意的是，display:table 本身并不会创建BFC，但是它会产生匿名框(anonymous boxes)，而匿名框中的display:table-cell可以创建新的BFC，换句话说，触发块级格式化上下文的是匿名框，而不是display:table。所以通过display:table和display:table-cell创建的BFC效果是不一样的。sEP上海云路网络科技有限公司

fieldset 元素在www.w3.org里目前没有任何有关这个触发行为的信息，直到HTML5标准里才出现。有些浏览器bugs（Webkit，Mozilla）提到过这个触发行为，但是没有任何官方声明。实际上，即使fieldset在大多数的浏览器上都能创建新的块级格式化上下文，开发者也不应该把这当做是理所当然的。CSS 2.1没有定义哪种属性适用于表单控件，也没有定义如何使用CSS来给它们添加样式。用户代理可能会给这些属性应用CSS属性，建议开发者们把这种支持当做实验性质的，更高版本的CSS可能会进一步规范这个。sEP上海云路网络科技有限公司

sEP上海云路网络科技有限公司

BFC的特性：sEP上海云路网络科技有限公司

1)块级格式化上下文会阻止外边距叠加

当两个相邻的块框在同一个块级格式化上下文中时，它们之间垂直方向的外边距会发生叠加。换句话说，如果这两个相邻的块框不属于同一个块级格式化上下文，那么它们的外边距就不会叠加。sEP上海云路网络科技有限公司

2)块级格式化上下文不会重叠浮动元素

根据规定，一个块级格式化上下文的边框不能和它里面的元素的外边距重叠。这就意味着浏览器将会给块级格式化上下文创建隐式的外边距来阻止它和浮动元素的外边距叠加。由于这个原因，当给一个挨着浮动的块级格式化上下文添加负的外边距时将会不起作用（Webkit和IE6在这点上有一个问题——可以看这个测试用例）。sEP上海云路网络科技有限公司

3)块级格式化上下文通常可以包含浮动

详见： W3C CSS2.1 - 10.6.7 'Auto' heights for block formatting context rootssEP上海云路网络科技有限公司sEP上海云路网络科技有限公司

通俗地来说：创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素，反之亦然，同时BFC任然属于文档中的普通流。sEP上海云路网络科技有限公司

至此，您或许明白了为什么 overflow:hidden或者auto可以闭合浮动了，真是因为父元素创建了新的BFC。对于张鑫旭在对《overflow与zoom”清除浮动”的一些认识 》一文中对于用包裹来解释闭合浮动的原理，我觉得是不够严谨的，而且没有依据。并且说道“Firefox等浏览器并没有haslayout的概念”，那么现代浏览器是有BFC的，从表现上来说，hasLayout 可以等同于 BFC。sEP上海云路网络科技有限公司

IE6-7的显示引擎使用的是一个称为布局（layout）的内部概念，由于这个显示引擎自身存在很多的缺陷，直接导致了IE6-7的很多显示bug。当我们说一个元素“得到 layout”，或者说一个元素“拥有 layout” 的时候，我们的意思是指它的微软专有属性 hasLayout http://msdn.microsoft.com/worksh ... r