CSS的Float

Float在CSS中是一个重中之重的东西，因为他是一个强大的，极有作用的一个CSS属性，但如果你没有理解透这个Float的话，那将是一个难搞的事情，特别是对于初学者来说，更是一个棘手事情。那么从今天开始我们一起来探讨这个Float。

刚才说过了，Float是一个极有用的属性，首先表现在布局上，全前提是你要清楚他，了解他。这样才能达到知已知彼，方能百战百胜。下面我们先来看一段代码：

HTML Markup

<div class="item"> <img src="w6144.gif alt="" /"> Widget 6144 <br>$39.95 </div> <div class="item"> <img src="w6145.gif" alt="" /> Widget 6145 <br>$44.95 </div> 

CSS Code

div.item {border: 1px solid; padding: 5px;} div.item img {float: left; margin: 5px;} 

上面的一段代码大家很容易能懂，但是像上面这样使用“float”就很容易出现下面这样的问题：

上图显示的效果很清楚的告诉我们，“img”浮动后，其父元素“div.item”就得不到拉伸，也就形像点说其内容无法撑开其本身的高度（如果里面元素都进行浮动的话更是明显，）。那这样是不是一个Bug呢？我想这至少是一个败笔吧，有很多同学将要花大部分时间去解决这样的问题。

知道问题根源

我们在Office排版中常碰到图文混排的格式，如下图所示：

当然我们在Web应中是没有那么强大的，我们来看一种图片在左，文字在右的混排样式，这也是我们在网页中常用的格式之一（另一种是文字在左，图片在右的风格），如下图所示：

根据上图所示，我们很快能想像到要使用下面这样的一种结构来制作：

<p> ...text... <img src="jul31-03-sm.jpg" height="200" border="0" class="picture"> ...text... </p> <p> ...text... </p> 

为了至使文字环在图片周围，我们将图片进行了浮动设置。而此时造成一个这样的现像：图像浮动后，此时图像伸出其包含的父元素“p”，换句话说，此时改变了父元素的自身高度。我们在段落“p”上加一个边框，效果更加明显：

上图这样的效果我们还可以接受，但是如果把浮动图像的父元素的高度改变一下呢？你将会看到这样的效果：

上图那样的效果你肯定是无法接受得了的吧。为了保持与传统的网页设计和作者的期望一样，css可以使浮动元素的父元素内容粘在其底部。这也是正常的文本流，所以“float”用于布局是强大的功能。

上面通过一个实例介绍了“float”问题的根源，下面我们一起来看看如何解决这样的问题？让我们的效果更趋于正常化：

解决问题方法

如果使用“float”创建一个非表格的布局，此时需要一种方法，要让这个浮动元素的周围元素得到伸展。目前，这需要一个结构性的Hack，换句话说我们只需要插入一个块元素，用这个块元素来关闭浮动，试想一下这样的一个结构：

<div class="item"> <img src="w6144.gif"> Widget 6144 <br>$39.95 <div class="clearer"> </div> </div> <div class="item"> <img src="w6145.gif"> Widget 6145 <br>$44.95 <div class="clearer"> </div> </div> 

接着我们在“hr”元素上加上下面的样式代码：

div.clearer {clear: left; line-height: 0; height: 0;} 

此时你将得到下图的效果：

上面我们使用的是“clear”属性来解决关闭浮动的问题，接下来我们在看一个设置“float”来清除浮动。

div.item {float: left; border: 1px solid; padding: 5px; width: 60%;} div.item img {float: left; margin: 5px;} 

使用浮动“float”来清除浮动，我们只需要在浮动元素的父元素上也设置一个浮动，这两种方法相比较：第一种方法，我们需要增加一个额外的标签，并且需要注意各浏览器下的微高兼容性；而第二种方法虽然不需要增加额外的标签，但在父元素设置“float”后，元素宽度会随其内容进行变化，此时我们需要设置一个宽度，此处设了一个宽度大于“50％”，主要是让元素不相邻显示在同一行。

印刷布局中,文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”

大家都了解到, CSS 网页布局的原理,就是按照(X)HTML 代码中对象声明的顺序,以流布局的方式 来显示它,而流布局就不得不说到 float 浮动技术,在(X)HTML 中的所有对 象,默认分为两种:块元 素(block element)、内联元素(inline element),虽然也存在着可变元素,但只是随上下文关系确定该元 素是块元素或者内联元素。其实 CSS 的 float 属性,作用就是改变块元素(block element)对象的默认显 示方式。在网页设计中,应用了 CSS 的 float 属性的页面元素就像在印刷布局里面的被文字包围的图 片一样。浮动的元素仍然是网页流的一部分。这与使用绝对定位的页面元素相比是一个明显的不同。 绝对定位的页面元素被从网页流里面移除了,就像印刷布局里面的文本框被设置为无视页面环绕一样。 绝对定位的元素不会影响其它元素,其它元素也不会影响它,无论它是否和其它元素挨着。

下面我们从不同的方面来了解这个float：

浮动的本质

浮动就是个带有方位的 display:inline-block 属性。display:inline-block 某种意义上的作用就是包裹 (wrap),而浮动也有类似的效果。然而,float 无法等同于 display:inline-block,其中原因之一就是浮动 的方向 性,display:inline-block 仅仅一个水平排列方向,就是从左往右,而 float 可以从右往左排列, 这就是两者的差异。

浮动的属性参数：

浮动拥有三个参数:none:对象不浮动,left:对象浮动到左边,right:对象浮动到右边。下面我们举例来说明这几种情况:

HTML Markup

<div id="floatA">浮动块Ａ</div> <div id="floatB">浮动块Ｂ</div> 

CSS Code

div { width: 200px; height: 50px; color: #fff; padding: 5px; margin: 5px; } #floatA { border: 1px solid red; background: orange; } #floatB { border: 1px dotted blue; background: teal; } 

在还没有应用浮动之前的效果:

下面我们来看第一种情况,就是我们给#floatA 应用浮动 float:left;其结果是什么样:

#floatA { float:left; border: 1px solid red; background: orange; } 

在IE6~IE7 浏览器中,对#floatA 块进行左浮动后,“浮动块A”已经向左浮动,而且“浮动块B” 紧随其后,但是在IE8 和FF等现代浏览器中,“浮动块B”在水平方向不见了,被“浮动块A”遮盖住了, 造成这种问题是因为没有进行浮动清除。至于清除浮动相关问题大家可以参阅《Clear Float》。

接下来我们在来看第二种清况，浮块A和浮块B都进行左浮动：

#floatA { float:left; border: 1px solid red; background: orange; } #floatB { float:left; border: 1px dotted blue; background: teal; } 

我们来看看效果：

从效果图中可以看出,现在各浏览器下的效果基本上达到一致。现在我们反过来设置,在#floatA 不设 置浮动,而在#floatB 设置左浮动,在各浏览器中又会有什么样的变化:

#floatA { border: 1px solid red; background: orange; } #floatB { float:left; border: 1px dotted blue; background: teal; } 

我们来看各浏览器下的效果：

效果中明显告诉我们，没有任何变化。上面我们所的是左浮动的几种情形，那么我们还有右浮动，还有一个左浮一个右浮，其实这些性质都差不多，大家可以创建几个div，然后对他们进行不同的浮动测试。这样你就会一下子明白浮动方向的作用。

浮动的破坏性

浮动可以说是所有 CSS 属性中的“破坏之王”。要理解浮动的破坏性,我们要从浮动最原始的意义 入手。浮动的最初意义就是文本围绕图片。文本为什么会围绕含有 float 属性的图片,那是因为浮动 破坏了正常的 line boxes 。因此这里就涉及到 line boxes 的概念,那么我们就顺便讲一下 line boxes 概 念,如下面一段 HTML 标记:

<p>我是一行普通的文本，我这里面含有一个<span>ＳＰＡＮ</span></p> 

这里面涉及到 4 种 boxes:

a)、首先 p 标签所在的 content Boxes 中,其包含了其它的 boxes,我们这里这在 body 标签中;

b)、inline boxes 如下图所示:

inline boxes 不会让内容显示成块,而是排成一行,如果外部含 inline 属性的标签(span,a,strong 等), 则属于 inline boxes,如果是个光秃秃的文字,则属于匿名 inline boxes。

c)、line boxes:

<p>我是一行普通的文本，我这里面含有一个ＳＰＡＮ</p> 

在 content boxes 里,一个一个的 inline boxes 组成了 line boxes。这是浮动影响布局的关键 box 类 型

d) content area, 它是一种围绕文字看不见的 box,其大小与 font-size 大小相关。

接下来我们在来看一种图文混排：

<p> 我是一行普通的文本，我里面含有一个<img src="front.png" alt=""/>图片 <br /> 我是第二行文本 <br /> 我是第三行文本 </p> 

默认情况下,图片与文字混排应该是这个样子:图片与文字基线对齐,图 片与文字在同一行上, 如上图所示,图片为一个 inline boxes,两边的文字也是 inline boxes。由于 line boxes 的高度是由其内 部最高的 inline boxes 的高度决定的,所以这里 line boxes 的高度就是图片的高度。此时图片与文字是 同一 box 类型的元素(都是 inline boxes),是在同一行上的,所以,默认状态下,一张图片只能与一 行文字对齐。而要想让一张图片要与多行文字对齐,您唯一能做的就是破坏正常的 line boxes 模型。

上面是一个不带有浮动的图片渲染方式，下面我们来看一下浮动图片的渲染效果

我们在这里看看,把 img 设置一个float:left看看其效果,左图是 IE7 及其以下版本,右图是 IE8 和FF等现代浏览器下效果效果:

刚才说过,正常情况下,图片自身就是个 inline boxes,与两侧的文字 inline boxes 共同组成了 line boxes,但是,一旦图片加入了浮动,情况就完全变了。那是浮动彻底破坏了 img 图片的 inline boxes 特性,至少有一点可以肯定,图片的 inline boxes 不存在了,它被浮动破坏了。一旦图片失去了 inline boxes 特性就无法与 inline boxes 的文字排在一行了,其会从 line boxes 上脱离出来,跟随自身的方位 属性,靠边排列。浮动破坏了图片的 inline box,产生了两个结果:一是图片无法与文字同行显示, 脱离了其原来所在的 line box 链;二是没有了高度(无 inline box -> 无 line box -> 无高度)。而这些结 果恰恰是文字环绕图片显示所必须的。

浮动的塌陷

浮动的破坏性给浮动带来一个塌陷,如:

HTML Markup

<div id="wrap"> <div id="floatA">浮动块A</div> <div id="floatB">浮动块B</div> <div id="floatC">浮动块C</div> </div> 

CSS Code

#wrap { border: 1px solid red; } 

#wrap div { width: 100px; height: 50px; } 

#floatA{ background: blue; border: 1px dotted lime; } 

#floatB { background: orange; border: 1px dotted blue; } 

#floatC { background: lime; border: 1px dotted orange; }

我们先来看看初步效果：

使用浮动(float)的一个比较疑惑的事情是他们怎么影响包含他们的父元素的。如果父元素只包含 浮动元素,且父元素未设置高度和宽度的时候。那 么它的高度就会塌缩为零。如果父元素不包含任 何的可见背景,这个问题会很难被注意到,但是这是一个很重要的问题。在这里我们可以称为“塌陷”。 现在我们先每个浮动块加上一个浮动:float:left;后面会有一个什么样的现象呢?

#floatA{ background: blue; border: 1px dotted lime; float:left; } #floatB { background: orange; border: 1px dotted blue; float:left; } #floatC { background: lime; border: 1px dotted orange; float:left; } 

针对这样的问题，如何解决，就不用我说了，你懂的。不过也可以看看这里是如何解决的。

浮动的好处：

浮动除了能让文本围绕图片之外,还能应用于网页的布局,如:

浮动对小型的布局同样有用。例如页面中的这个小区域。如果我们在我们的小头像图片上使用浮 动,当调整图片大小的时候,盒子里面的文字也将自动调整位置:

同样的布局可以通过在外容器使用相对定位,然后在头像上使用绝对定位来实现。这种方式中, 文本不会受头像图片大小的影响,不会随头像图片的大小而有相应变化。

浮动的坏处：

宇宙万物都是相生相克的,浮动能给我们在设计中带来好处,同时它也存在不少坏处,特别是在 IE 中造成不少 Bug,比如我们前面碰到的 IE 中会产生一个 margin 双倍距离 Bug,当然还会给我带来 其它的 Bug:IE 文本产生 3PX 的 Bug; IE6 IE7 底边 Bug;还有就是浮动的Bug。出处：W3CPLUS