如何理解 CSS 中的浮动布局方式？最主要的功能是什么？如何正确地使用它？
浮动从何而来？我们为何要清除浮动？清除浮动的原理是什么？ 下面将一步一步地深入剖析其中的奥秘，让浮动使用起来更加得心应手。 一、清除浮动 还是 闭合浮动 （Enclosing float or Clearing float）？ 很多人都已经习惯称之为清除浮动，以前我也一直这么叫着，但是确切地来说是不准确的。我们应该用严谨的态度来对待代码，也能更好地帮助我们理解开头的三个问题。 1）清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none； 2）闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。 两者的区别 请看优雅的 Demohttp://www.iyunlu.com/demo/enclosing-float-and-clearing-float/index.html 通过以上实例发现，其实我们想要达到的效果更确切地说是闭合浮动，而不是单纯的清除浮动，在footer上设置clear：both清除浮动并不能解决warp高度塌陷的问题。 结论：用闭合浮动比清除浮动更加严谨，所以后文中统一称之为：闭合浮动。 二、为何要清除浮动？ 要解答这个问题，我们得先说说CSS中的定位机制：普通流，浮动，绝对定位 （其中"position:fixed" 是 "position:absolute" 的一个子类）。 1）普通流：很多人或者文章称之为文档流或者普通文档流，其实标准里根本就没有这个词。如果把文档流直译为英文就是 document flow ，但标准里只有另一个词，叫做普通流 http://www.w3.org/TR/CSS2/visuren.html#normal-flow（normal  flow)，或者称之为常规流。但似乎大家更习惯文档流的称呼，因为很多中文翻译的书就是这么来的。比如《CSS  Mastery》，英文原书中至始至终都只有普通流 normal flow（普通流） 这一词，从来没出现过document flow （文档流） 2）浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到 块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会 自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。 正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。 绝对定位就不多说了，不在本文讨论范围之内，下回分解。 三、清除浮动的原理——了解 hasLayout 和 Block formatting contexts 先看一下清理浮动的各种方法： 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> 优雅的 Demohttp://www.iyunlu.com/demo/enclosing-float-and-clearing-float/index.html#float1 优点：通俗易懂，容易掌握 缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦，这是坚决不能忍受的，所以你看了这篇文章之后还是建议不要用了吧。 2）使用 br标签和其自身的 html属性 这个方法有些小众，br 有 clear=“all | left | right | none” 属性 <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> 优雅的 Demohttp://www.iyunlu.com/demo/enclosing-float-and-clearing-float/index.html#float2 优点：比空标签方式语义稍强，代码量较少 缺点：同样有违结构与表现的分离，不推荐使用 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> 优雅的 Demohttp://www.iyunlu.com/demo/enclosing-float-and-clearing-float/index.html#float3 优点：不存在结构和语义化问题，代码量极少 缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素；04年POPO就发现http://plod.popoever.com/archives/000309.html，这是我作为一个多标签浏览控所不能接受的。所以还是不要使用了 4)父元素设置 overflow：auto 属性 同样IE6需要触发hasLayout，演示和3差不多 优点：不存在结构和语义化问题，代码量极少 缺点：多个嵌套后，firefox某些情况会造成内容全选；IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等，firefox早期版本会无故产生focus等, 请看 嗷嗷的 Demohttp://labs.aoao.org.cn/test/overflow/firefox/focus/ ,不要使用 5）父元素也设置浮动 优点：不存在结构和语义化问题，代码量极少 缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用 6）父元素设置display:table 优雅的 Demohttp://www.iyunlu.com/demo/enclosing-float-and-clearing-float/index.html#float6 优点：结构语义化完全正确，代码量极少 缺点：盒模型属性已经改变，由此造成的一系列问题，得不偿失，不推荐使用 7）使用:after 伪元素 需要注意的是 :after是伪元素（http://www.w3.org/TR/selectors/#pseudo-elements），不是伪类（某些CSS手册里面称之为“伪对象”），很多清除浮动大全之类的文章都称之为伪类，不过csser要严谨一点，这是一种态度。 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。 该方法源自于:http://www.positioniseverything.net/easyclearing.html 原文全部代码如下: <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; } 优雅的 Demohttp://www.iyunlu.com/demo/enclosing-float-and-clearing-float/index.html#float7 优点：结构和语义化完全正确,代码量居中 缺点：复用方式不当会造成代码量增加 小结 通过对比，我们不难发现，其实以上列举的方法，无非有两类： 其一，通过在浮动元素的末尾添加一个空元素，设置 clear：both属性，after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素； 其二，通过设置父元素 overflow 或者display：table 属性来闭合浮动，我们来探讨一下这里面的原理。 在CSS2.1里面有一个很重要的概念，但是国内的技术博客介绍到的比较少，那就是http://www.w3.org/TR/CSS21/visuren.html#block-formatting（块级格式化上下文），以下简称 BFC。 CSS3里面对这个规范做了改动，称之为：http://www.w3.org/TR/css3-box/#block-level0，并且对触发条件进行了进一步说明。  四、闭合浮动方法——精益求精 更多请看我博客原文：http://www.iyunlu.com/view/css-xhtml/55.html