CSS浮动之我见--整理集合

本文引自：http://www.cnblogs.com/lhb25/p/story-of-clear-float.html

一、什么是浮动？

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

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

　　1）清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none；

　　2）闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。

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

　　结论：用闭合浮动比清除浮动更加严谨，所以后文中统一称之为：闭合浮动。

---

 

二、清除浮动的方法有哪些？

了解 hasLayout 和 BFC（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>

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

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

　　2)父元素设置 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会导致中键失效，这是我作为一个多标签浏览控所不能接受的。所以还是不要使用了

　　3）父元素也设置浮动

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

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

　　4）使用 :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; }

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

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

　　通过对比，我们不难发现，其实以上列举的方法，无非有两类：

　　其一，通过在浮动元素的末尾添加一个空元素，设置 clear：both属性，after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素；

　　其二，通过设置父元素 overflow 或者display：table 属性来闭合浮动，我们来探讨一下这里面的原理。

　　在CSS2.1里面有一个很重要的概念，但是国内的技术博客介绍到的比较少，那就是 Block Formatting Contexts（块级格式化上下文），以下简称 BFC。

使用::after伪元素

利用浮动元素的容器的::after伪元素来清楚浮动，由于::after伪元素只对块级元素有用，因此要设置display:block，通过::after伪元素在浮动结束之后，向其中添加看不见的空格“\20”或者是点'.',我们也可以使用 content:""

需要注意的是IE6，IE7不支持after伪元素，因此要添加.clearfix{zoom:1}；来触发haslayout，或者你可以把它写到IE6、7的CSS hacker文件里，这样不会影响W3C标准验证

---

 

三、推荐的方法

 　　我们发现其实更多的：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:"XXXXXXXXX",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙；

　　5）zoom：1 触发IE hasLayout。

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

line-height：0。

　　在实际开发中，我们常常使用的是推荐的方法，已经完全能解决我们的闭合问题。

　　而通过overflow闭合浮动，实际上已经创建了新的 块级格式化上下文，这将导致其布局和相对于浮动的行为等发生一系列的变化，闭合浮动只不过是一系列变化中的一个作用而已。所以为了闭合浮动去改变全局特性，这是不明智的，带来的风险就是一系列的 Bug，比如 Firefox 早期版本产生 focus，截断绝对定位的层等等。始终要明白，如果单单只是需要闭合浮动，overflow就不要使用，而不是某些文章所说的“慎用”。

---

 

四、为何会有浮动？底层原理有哪些？

　　在CSS2.1里面有一个很重要的概念，但是国内的技术博客介绍到的比较少，那就是 Block Formatting Contexts（块级格式化上下文），以下简称 BFC。

　　关于BFC的文章，可以看这篇文章：http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

　　　　　　　　　　　　　　　　　　http://www.cnblogs.com/lhb25/p/story-of-clear-float.html