css排版之float浅析

1. 浮动的基本概念
2. 浮动的基本使用及浮动使用时需要注意的种种

对于网页的排版来说，浮动的概念 比较简单，但是实际使用时却不是想象中的那么简单。但此文仅仅简单介绍一下自己使用 浮动的感受 吧。

1.浮动的基本概念
        只要去网上搜索浮动相关的东西，可以得到一大堆的答案：
        float 是 css 的定位属性。在传统的印刷布局中，文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”。在网页设计中，应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图片一样。浮动的元素仍然是网页流的一部分。这与使用绝对 定位的页面元素相比是一个明显的不同。绝对定位的页面元素被从网页流里面移除了，就像印刷布局里面的文本框被设置为无视页面环绕一样。绝对定位的元素不会 影响其它元素，其它元素也不会影响它，无论它是否和其它元素挨着。

       浮动在CSS中的作用是使元素脱离正常的文档流(在html中文档流即为元素从上至下排列的顺序)并使其移动到其父元素的“最左边”或“最右边”(元素往左或往右移动直到碰到另一个浮动元素或父元素内容区的边界)。

       fload属性有四个可用的值：Left 和Right 分别浮动元素到各自的方向，None (默认的) 使元素不浮动，Inherit 将会从父级元素获取float值。

可以来看一张截图，如下：

其中，红色的div都是 向左浮动的，绿色的div都是向右浮动的，黑色的div是不浮动的，可以看出，这里的表现符合上面的关于浮动的解释

代码如下 ：

2.浮动的基本使用及浮动使用时需要注意的种种

        个人觉得其最初应该 是为了实现像报纸上 文字环绕图片的效果而引入的浮动的概念，而后又添加了一些功能。但这个我们先别管。看看怎么用吧 。

        我觉得这个就是看 需要了。比如像上面的需要文字环绕效果来使用浮动，或者 就单纯的想节点浮动显示。或者想实现中间居中，两边对称浮动的效果，就像下面一样：

代码如下 ：

可以看到红色浮动到左边，绿色浮动到右边。而黑色保持居中。但是要达到这种效果还要注意这三个的顺序，比如把黑色块放到前面一些就会出现下面的情况：

代码如下：

为了更清楚的看到它们之间的关系，我给包裹这三个块的外围块加了1px的红色border，可以看到，右浮动的绿色块刚好处于黑色块的下方，我们来简单分析一下这个过程，首先是红色块先被左浮动，然后黑色块就好像浮动的红色块不存在一样在自己的父节点块里居中显示，并且占据第一行，然后才浮动绿色块到右边，由于第一行已经被占据了，所以只好被排到第二行去了，这与上面的对比一下也很容易明白。这也验证了浮动不会影响前面元素的定义。虽然这个结构看起来与前面的差别不大，但是使用时如果不注意，就可能会出现意想不到的问题。

我们再来看看另一种情况：

代码如下：

此时的结构是上面黑色块没变，左浮动的.img0块及多个右浮动的.img1块是属于同一个.clearfix div块之下的。显然，如果不考虑新增加的几个.img块及下面的一个.clearfix2块，那么这与上面的情况没什么区别（除了浮动块的高度减少以容纳更多的块在有限的空间里面）。这里，我们主要来看看两个大块里的内容相互之间的影响。显然，上面的大块里超出来的浮动元素影响了后面的大块里的浮动元素。比如.img02就被挡在了.img0的后面。最上面的.img12就被.img1给挡住了，看来浮动元素自己组成了一个世界，无论你从哪里来，我们一视同仁。

有了浮动 ，很多时候我们还要关心一下如何清除浮动。上面的浮动元素显然没有撑开自己的父元素（根据W3C，浮动的元素没有实际的高度），不然两个大块之间的浮动元素也不会相遇。我们现在来清除浮动试试。

效果如下：

代码如下：

效果真是立竿见影啊！

再看看清除浮动的代码：

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

此处需要注意清除浮动的:after伪元素在使用时其是被插入到相对应的元素的子节点里面而不是其后面。

还要注意的是上面的清除浮动的方法虽然可以得到当前主流的浏览器支持，但是对于IE的一些老前辈，比如IE5 IE6 IE7等都不能很好的支持（实际上是一团糟），

清除浮动的方法很多，上面是比较简单的一种，还有比较常见的一种就是在.clearfix上加overflow属性值为hidden。

或者直接在最后的浮动元素后加一个空的div设置其clear属性值为both（当然视情况而定，有时候只设置其值为left或right也可以，只是用both是双保险），这些比较low了就不多说了。

另外我在网上找到了几个比较经典的清除浮动的方法比如：

.clearfix:after {
content:".";
display:block;
visibility:hidden;
height:0;
clear:both;
}
.clearfix { 
display: inline-block; 
}
html[xhtml] .clearfix{
display: block;
}
* html .clearfix{
height: 1%;
}

这种我试过确实有效，只是显示时由于.clearfix 设置display: inline-block; ，使得.clearfix块的宽度不是像上面的100%，而是随内容而被撑开。

再看看另外的一种说是较上面那个更新的（2011年出来的）：

.clearfix:before, .clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
/*IE6-7*/
.clearfix:after{
zoom: 1;
}

发现效果并不是太好，比如在IE7里面就不能正确的清除浮动。

后来我又找了一个更厉害的清除浮动的方法，传说中是最牛的：

.clearfix{
*zoom:1;/*为了兼容低版本的IE浏览器*/
}
.clearfix:after{
  display:block;
  content:"clear"; 
  height:0; 
  clear:both; 
  overflow:hidden; 
  visibility:hidden;
}

牛，就是不一样，我测试了一下，效果是目前我试过最好的，就连很老的IE5都能很好的清除浮动。看来以后清除浮动就选它了。