浅谈css float

相信许多许多Web前端的朋友一定被float这个属性给困扰过吧，有时候用它来布局很方便，能够实现元素快速的水平排列，但有时候它又像一个精灵，让人无法琢磨透它方位。在网上也看了一些关于float的帖子，感觉这一篇写得不错，特此推荐给大家：http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%B8%80/

接下来就用实际例子说说float平时的常用之处：

<div class=“div”> <div class="div6"></div>
<div class="div7"></div>
<div class="div8"></div>
<div>

.div1{
    height: 2000px;
    width: 960px;
    outline: solid blue;
}

.div6{
    height: 100px;
    width: 100px;
    outline: solid blue;
    float: left;
}
.div7{
    height: 200px;
    width: 200px;
    outline: solid red;
    float: left;

}
.div8{
   float: left;
    width: 50px;
    height: 50px;
    outline: solid black;
}

（一）有一个大的盒子，里面包含三个大小不同的框，将这三个框分别浮动后，效果如下：

可以把浮动的作用看做是退休！如果三个框不使用浮动，那么他们将按照块级元素的特点，呈垂直排列。这就好比一个干部班子，一级一级的从上向下排列。一旦使用float功能后，就如同让干部退休。1号干部退休（float）后，把权力让给了2号，2号退休后，把权力给了3号。最后，三人都是同级别的退休干部，呈水平排列。

当然，如果1号退休后把权力交给2号，2号一致赖着权力不放（float="none"），那么将会出现这样的情况：

1号虽然退休，但终究还有个位置，2号无法完全将其位置占据，使自己显示全部出，而3号等不到2号退休，只能在下面干坐着。

（二）可想而知，如果三个框都浮动了，再在下面加如下一串代码：

.div2{
    height: 300px;
    width: 200px;
    outline: solid blue;
    background-color: aqua;}
那么下面的框会自动向上，夺取权力：

那么问题来了，如果1,2,3在退休后，又不想让4来继承权力，应该怎么办呢？好办~ 去拉来一个强悍的“爸爸”罩着他们。也就是可以将1,2,3装在一个框架内:<div class="W"    <div class="div6">1</div>

    <div class="div7">2</div>    <div class="div8">3</div></div>

慢着，找来了W爸爸，总要告诉他自己需要保护吧。所以需要出发W爸爸的保护机制：
方法一：.W{overflow:hidden}

方法二：.W{display:inline-block}

这样的话，4就会乖乖的呆在下面了。

（三）float实现图文混排。（或者是文字包裹图像）
先看代码：

<p style="display: inline-block;width: 300px;outline:solid"><span style="display: inline-block;width: 100px;height: 100px;background-color: blue"></span>博客园是面向开发者的知识分享社区，不允许发布任何推广、广告、政治方面的内容。
    博客园首页（即网站首页）只能发布原创的、高质量的、能让读者从中学到东西的内容。
    如果博文质量不符合首页要求，会被工作人员移出首页，望理解。如有疑问，请联系contact@cnblogs.com。
</p>
效果如下：

由于图片的宽度小于p标签的宽度，所以默认会有部分文本与图片的地段对其显示。如果想要实现图片与p标签右边空白部分全部由文本填充，可以对图片进行浮动处理：
span{float:left}

图片向左浮动后，高度不存在了，文字置顶开始排列。W3C的解释是float之后，元素不占空间，但从此例来看，如果浮动后不占空间，那么文字为何没有从最左边开始排列。还是形象的看成，一个人虽然退休了，但它终究还存在在世上，离开了原来的工作岗位，但是却还是实实在在的存在。所以文字会绕道而行。。。。。关于float，以后还需进行深入的探索