您现在的位置： 365建站网 > 365文章 > 浮动及清除网页设计员必备的两个工具

浮动及清除网页设计员必备的两个工具

文章来源：365jz.com 点击数：211 更新时间：2009-09-30 11:59 参与评论

主机网全新上线，买空间、服务器就上主机网，安全有保障！CNIDC.COM

在本文中你将开始了解浮动与清除——现代网页设计员必备的两个工具。它们的用途很多，你可以利用它们来使文本环绕在图像周围，或者甚至用来创建多列布局。

本文结构如下：

浮动与清除为何而生？
一些乏味的理论
浮动是如何工作的？
细节点
多个浮动元素
浮动元素的边距
清除
浮动元素的包含
收缩包围
浮动元素的居中
漏洞!
总结

如果往一本标准的杂志里面看去，你会看到文字环绕在文章插图周围。CSS中的float属性就是为了在网页上实现这种布局样式而发明的。浮动一张图片——或者浮动任何其它页面元素——就是将其推到一侧，使文本显示在另一侧。清除某个浮动元素就是在必要时将其下压，以防止它紧挨着浮动元素显示。

尽管任何页面元素都可设置为浮动，涉及人员普遍都是用它来达到多列布局的效果，以免滥用表格标记。

一些乏味的理论

为了说明浮动是如何起作用的，你需要仔细研究并观察web浏览器是如何渲染HTML/CSS文件的。别担心，我会尽量简短一些。

每个可见的HTML元素都会生成一个用于渲染的盒模型。当你在电脑屏幕或移动电话上浏览该文件的时候，这些盒模型就会在屏幕上渲染出来。当你打印该文件的时候，这些盒模型就会在纸上渲染出来。当你使用屏幕阅读器的时候，这些盒模型的内容就会以听觉的方式渲染出来，就像语音一样。

就像HTML中有块级和内联元素一样，CSS中也有块级和内联盒模型。从定义上讲，块级元素生成块状盒模型，而内联元素生成内联盒模型。除了由页面元素生成的盒模型之外，还有其它一些生成的盒模型，例如，为文件的文本内容而生成的盒模型。块状盒模型通常是按照元素在标记中的出现顺序从上到下排列的。如果不采用CSS的话，区块元素是不能并排显示的。内联盒模型是水平排列的。direction属性决定了它们是从左到右还是从右到左排列（如果不特别指定的话，默认是从左到右排列）。

下面这种现象被称为文件流：内联盒模型在其上层块状盒模型中横向流动，而块状盒模型纵向流动。盒模型按照元素在HTML标记中的顺序出现。

看看下面这个简单的HTML文档（我只给出body元素之内的部分）：

程序代码

以下为引用的内容：
<p>This is a very simple document.</p>
<p>It consists of <em>two</em> paragraphs.</p>

图1显示了该文件的屏幕截图，其上的装饰层显示了由p元素生成的两个块状盒模型以及由em元素生成的内联盒模型。

#FormatImgID_0#

图1：由p元素生成的块状盒模型，以及由em元素生成的内联盒模型之演示。

所有在输出设备上排成一“线”的内联盒模型都被装在想象中的长方形里，这种长方形叫做线框。线框总是从上到下排列的，彼此之间没有间距，如图2所示：

#FormatImgID_1#

图2：每个渲染行都被装在一个单独的线框中。‘

主机网全新上线，买空间、服务器就上主机网，安全有保障！CNIDC.COM

浮动是如何工作的？

好了！现在我们已经学完了所有乏味的理论知识，让我们来看看浮动和清除的语法规则，并学习几个例子。

float属性有四个有效值：left, right, none以及inherit。其中，前两个值是使用得最多的，它们的作用是使一个盒模型浮动到左侧或右侧。作为默认声明，float:none通常是用于在其它一些规则中“撤销”某个声明。float:inheritis一般很少用到——我从没见到谁在自然状态下用过它——它的存在大概仅仅是为了保持一致性。

浮动一个盒模型就是指将它从文件流中取出并按照指定的浮动方向尽可能地向左或向右移动。“尽可能”一般是指直到浮动元素的外缘接触到包含区块的边界为止（如果有填充距的话，就是到包含区块的填充距内侧）。因此，对于float:left来说，盒模型将向左移动，直到其左边界接触到父盒模型的左沿。

细心的读者可能会注意到我在上面用了“一般”这个词。当我们设置一个盒模型向左浮动时，如果已经有了一个向同样方向浮动的盒模型，后面这个盒模型就会在接触到第一个盒模型之后停止浮动。也就是说，浮动元素不会互相重叠。

下面我们要来看看浮动的运行效果，先准备好你的文本编辑器。

新建一个文件，将下面代码拷进去，将文件保存为float.html.

程序代码

以下为引用的内容：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Floating</title>

</head>
<body>
<p id="p1"><span id="span-a">Lorem ipsum</span>
<span id="span-b">dolor sit amet</span>

<span id="span-c">consectetuer</span> adipiscing elit.
Curabitur feugiat feugiat purus.
Aenean eu metus. Nulla facilisi.
Pellentesque quis justo vel massa suscipit sagittis.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Quisque mollis, justo vel rhoncus aliquam, urna tortor varius lacus, ut tincidunt metus arcu vel lorem.
Praesent metus orci, adipiscing eget, fermentum ut, pellentesque non, dui.
Sed sagittis, metus a semper dictum, sem libero sagittis nunc, vitae adipiscing leo neque vitae tellus.
Duis quis orci quis nisl nonummy dapibus.
Etiam ante. Phasellus imperdiet arcu at odio.
In hac habitasse platea dictumst. Aenean metus.
Quisque a nibh. Morbi mattis ullamcorper ipsum.
Nullam odio urna, feugiat sed, bibendum sed, vulputate in, magna.
Nulla tortor justo, convallis iaculis, porta condimentum, interdum nec, arcu.
Proin lectus purus, vehicula et, cursus ut, nonummy et, diam.</p>

<p id="p2">Nunc ac elit. Vestibulum placerat dictum nibh. Proin massa.
Curabitur at lectus egestas quam interdum mollis.
Cras id velit a lacus sollicitudin faucibus.
Proin at ante id nisi porttitor scelerisque.
In metus. Aenean nonummy semper enim.
Aenean tristique neque quis arcu tincidunt auctor.
Fusce consequat auctor ligula.
Fusce nulla lorem, sagittis a, lacinia et, nonummy in, eros.
In nisi augue, aliquam eget, convallis vel, malesuada quis, libero.</p>

<p id="p3">Hello, World!</p>

</body>
</html>

这段内容可真多，但我们需要一些文本内容来显示浮动是如何运作的。

用你的web浏览器打开这个文件来看看效果。看起来很烦人，对不对？
在文本编辑器中再新建一个文件，填入以下代码，在同一路径下将其另存为style.css。
程序代码
```
#span-a {
  float: left;
  background-color: #cfc;
  color: #030;
}
```
将下面语句插入到</head>标签之前，使该样式表链接到HTML文档中：
程序代码
```
<link rel="stylesheet" type="text/css" href="style.css">
```
保存HTML文档，并在浏览器中刷新。现在可以看到包含“Lorem ipsum”字样的span元素浮动到了左侧。为了使其稍微显眼一点，我将它的背景设置成了浅绿色。
这个效果现在还是不太容易看出来，所以我们来将浮动元素稍微变大一点。将下面的声明加入到你的样式表中：
程序代码
```
#span-a {
  float: left;
  background-color: #cfc;
  color: #030;
  padding: 1em;
}
```
保存，刷新，现在可以看到绿色区域变大了，这是因为我们在该盒模型的四边上都加上了一点填充。该浮动元素占据了三行文本的高度，我们可以清除地看到其它文本环绕在浮动元素周围。

细节点

下面我将更为详细地分析这段代码的机理。由第一个span元素生成的浮动盒模型被移到了左侧，直至HTML文档的边缘，而与之相邻的线框被缩短了。虽然不容易看出来，但是由文本段落生成的容纳该浮动元素的块状盒模型却没有受到影响。为了更清楚地演示这一点，我们给文本段落加上高亮：

将下面的CSS规则加入到样式表中：
程序代码
```
p {
  border: 1px solid #f00;
}
```
再保存一下该CSS文件，刷新浏览器。可以看到每个段落周围都出现了红色边框——注意，该浮动元素位于其中一个段落内部。
我们修改一下最后一段代码，以证明该浮动元素停驻在其父元素填充区域的内缘处：
程序代码
```
p {
  border: 1px solid #f00;
  padding: 1em;
  background-color: #ff9;
}
```
保存，刷新，这个结果证明了之前我所说过的话：浮动盒模型被移动到了其包含区块的填充距边缘上。还可以看到在浮动盒模型的下面，文本段落的黄色背景仍在延伸。很显然，子盒模型的浮动没有影响到段落盒模型，只影响了其内部的线框。
我们来做个更进一步的实验——如果浮动元素比其父盒模型更长，会发生什么呢？将浮动规则改成下面这一段代码：
程序代码
```
#span-a {
  float: left;
  background-color: #cfc;
  color: #030;
  padding: 1em 1em 10em;
}
```

注意：如果你的浏览器窗口比较小，你可能得把底部填充的值设得比10em更大些，这样绿色区域才能超过段落的底边框。

现在你可以看到一些有趣的现象：浮动盒模型伸过了上级区块；而上级盒模型并没有进行相应地扩展来容纳该浮动子盒模型。你也可以看到（如果你的底部填充值够大的话）与浮动元素相邻的第二个段落的线框缩短了。

多个浮动元素

我们再创建一个浮动元素，来看看两个元素向同方向浮动时会产生什么效果。

在样式表中加入下面规则，照样保存并刷新：
程序代码
```
#span-b {
  float: left;
  background-color: #ccf;
  color: #003;
  padding: 1em;
}
```
现在包含“dolor sit amet” 字样的span元素也浮动到左侧去了。可以看到，该元素向左移动，直到它接触到第一个浮动元素；也就是说，“尽可能”地移动。
我们干嘛要满足于两个浮动元素？我们来做第三个——将下面规则添加到样式表中：
程序代码
```
#span-c {
  float: left;
  background-color: #fcc;
  color: #300;
  padding:2em 1em;
}
```
我希望你再添一条临时代码，来看看当行宽度不够容纳一个浮动元素的时候会发生什么现象。将下面的规则添加到样式表尾部：
程序代码
```
span {
  width: 34%;
}
```
照样保存样式表，刷新浏览器中的页面文件——你将会看到图3所示的输出效果：

#FormatImgID_2#

图3：是不是跟你预期的效果不大一样？

哇！刚才发生什么了？第三个浮动元素现在跑到第二个浮动元素的下面去了！（在IE6中会产生其它一些奇怪的现象，现在我们先略过不谈。）由于每个span元素的宽度是段落宽度的34%（由第三步中加入的加码所指定），再算上填充距，总空间是不够让三个浮动元素并排显示的（3 x 34% = 102%）。前两个浮动元素位于同一行，而第三个浮动元素就只有下移了。需要注意的是为了凑在这一行中，第三个浮动元素只下移了必要的距离。由于第一个浮动元素的右边有空间，第三个浮动元素就没有跑到这个很长的浮动元素下面去。

另一个值得一提的有趣现象是你为span元素指定了宽度。由于span是一种内联元素，指定不指定宽度本来是不会产生任何差别的。然而，在浮动某个盒模型时，会自动将该元素转换为块状盒模型，因此我们就可以对其指定大小和垂直边距。

主机网全新上线，买空间、服务器就上主机网，安全有保障！CNIDC.COM

浮动元素的边距

下面我们来探究一下如何利用浮动元素的边距。

首先，删掉你刚才添加的针对span元素的临时代码，然后保存，刷新，让三个浮动元素重新并排显示。换句话说就是删掉下面这段代码：
程序代码
```
span {
  width: 34%;
}
```
现在浮动元素都紧紧地挨在一起了，相邻的文本紧跟在最后一个浮动元素后面显示（除非你用的是微软IE6或更老的版本，在这种情况下会在右边出现一个3像素宽的间隙，这是由3像素慢移漏洞引起的）。怎样才能在浮动盒模型周围制造一些空档呢？答案就是边距！
我们在中间的浮动元素上尝试一下这种办法——将中间的浮动元素的CSS代码改成下面这段，然后保存并刷新：
程序代码
```
#span-b {
  float: left;
  background-color: #ccf;
  color: #003;
  padding: 1em;
  margin-left: 1em;

  margin-right: 1em;
}
```
好了，现在中间那个浮动元素的两变都出现了间隔。
你也可以在浮动盒模型上设置垂直边距——将第三个浮动元素的CSS代码改成下面的样子，然后保存并刷新。
程序代码
```
#span-c {
  float: left;
  background-color: #fcc;
  color: #300;
  padding:2em 1em;
  margin-top: 2em;

  margin-bottom: 2em;
}
```
这样第三个浮动元素就会下移，而它下面也同样会有额外的间隔。

让我们趁热打铁，来玩玩负边距！将第三个浮动元素的代码做如下改动，然后保存，刷新：

程序代码

#span-c {
  float: left;
  background-color: #fcc;
  color: #300;
  padding:2em 1em;
  margin-top: 2em;
  margin-bottom: 2em;
  margin-left: -4em;
}

你将看到如图4所示的输出效果：

#FormatImgID_3#

图4：现在可以看到浮动元素彼此重叠！

感觉怎么样，嗯？谁说浮动元素不能互相重叠的？注意观察负左边距是如何将整个浮动元素移到左边去的。

浮动元素负边距的使用对某些类型的多栏布局来说是非常有帮助的。

清除

既然我们学完了关于浮动的基础知识，下面我将讨论与之紧密相关的清除。

在本文的所有例子中，文本都是环绕在浮动元素周围的，而块状盒模型不会被浮动元素影响。有时我们需要保证某个元素不会与浮动元素相毗连。比如说，在一篇文章中，新章节开头的标题是不应该紧挨着前一章中的图片显示的。就算这幅图片伸到了前一个段落的下方，你大概也宁愿将标题放在该图片的下面。对此，唯一的解决办法就是在标题上运用clear属性。

还有一个例子就是那种随处可见的带全长度页脚的三栏式布局。如果每一栏都是浮动的，在页脚上使用clear属性就可以保证使它处于所有栏的下方——不管哪一栏最长。

clear属性有三种有用的属性值：left, right和both。
none（默认值）和inherit也是合法的属性值。

clear的使用：对某个元素设置left，就是指确保该元素所生成的盒模型的位置始终处在它左侧所有浮动盒模型的下方。如果使用了clear:bothit的话，则是处在它两侧所有浮动盒模型的下方。

清除是通过下面操作来实现的：即在必要时将元素下移（在其顶边距上添加空格），直到其顶边降到指定方向（单个或多个方向）上所有浮动盒模型之下。下面这个例子更能说明问题：

在进行操作之前，我们要清理样式表。将#span-b和#span-c的代码都删掉，只留下绿色的左浮动元素。确保它的底部填充距大得足够让它延伸到第二个段落去。
为第二个段落添加如下规则，然后保存，刷新：
程序代码
```
#p2 {
  clear: left;
}
```
看！第二个段落下移了，一直下移到它摆脱浮动元素为止，如图5所示：

#FormatImgID_4#

图5:第二个段落在第一段下方实现了浮动清除。

为了制作复杂的效果，我们可以在同一个元素上运用float和clear。
为第二个浮动元素添加下面规则，使其对第一个浮动元素实现清除效果，然后保存并刷新页面：
程序代码
```
#span-b {
  float: left;
  clear: left;
  padding: 1em;
  background-color: #ccf;
  color: #003;
}
```

现在蓝色的浮动元素出现在绿色浮动元素的下面，完全跑到父段落外面去了。由于它也是向左浮动的，第二个段落就下移得更多，以实现对它的清除。

主机网全新上线，买空间、服务器就上主机网，安全有保障！CNIDC.COM

浮动元素的包含

就如你在上面所看到的，父盒模型并没有相应地扩展，来容纳浮动的子盒模型。这样往往会造成混乱，比如，假如你采用浮动所有li元素的办法，来从一张无序列表制作水平菜单，而这时正好某个元素的所有子盒模型也是浮动的，在这种情况下就可能引起混乱。由于浮动盒模型是从文件流中取出来的，并不会影响到父盒模型，浮动所有的子盒模型就可以将父盒模型腾空，从而使其高度归于零。有时这可能不是我们想要的，比如当你想为父盒模型设置背景的时候。这时如果父盒模型的高度为零，就无法看见背景了。

显然我们需要一些技巧来使父盒模型扩展，从而容纳其浮动子盒模型。传统方法是在标记中加入一个附加元素，将其放在父盒模型的结束标签之前，并设置为clear:both。这的确有效，但是也太不方便了，因为它牵涉到引入额外的，不必要而又非语义化的标记。幸好还有其它的办法，下面我们就来探讨一下：

第一种方法是直接浮动父盒模型。浮动的盒模型总是会随着其浮动子盒模型而扩展的。

为了在我们的实验文件上尝试这个办法，我们再次删掉#span-b的代码，并照下面的代码将第一个段落设为浮动，然后保存并刷新：
程序代码
```
#p1 {
  float: left;
}
```
这样，这个段落就扩展开来，将绿色的浮动元素包含进去了。这个办法好倒是好，但有时浮动父盒模型并不可行。还有一个可以避免浮动父盒模型的办法，就是将父盒模型的overflow属性设置为除visible之外的值。如果你将其设置为hidden，并且不设定高度，那么父盒模型就会将子盒模型包含进去。
将最后一行代码替换为下面这个，然后保存并刷新页面：
程序代码
```
#p1 {
  overflow: hidden;
}
```
注意，后一种办法在IE6及更早版本的浏览器中不能奏效。

Shrink-wrapping收缩包围

之前我曾经提到过，浮动某个内联盒模型会使其变成块状盒模型，从而使我们得以设定它的大小和垂直边距。浮动一个块状盒模型也同样会带来惊人的效果：如果没有指定宽度，该盒模型就会“收缩包围”从而与其内容相一致。如果你在示例文件中将第一段设置为浮动的话，就不会看到这种效果，因为第一段的内容足够填满整个窗口的宽度（除非你的显示器比它还宽）。

我们将最后一个段落设为浮动，来看看效果。为了产生一些更明显的改变，让我们大胆一些，将其浮动到右侧！

将下面的规则添加到样式表中，保存并刷新页面：

程序代码

#p3 {
  float: right;
}

现在“Hello, World!”这个段落浮动到了右边，而且宽度也变了，其宽度等于文本宽度加上前面的规则中为所有段落设置的填充距。

浮动元素的居中

有时你也许会想要浮动某个元素——也许是为了让它容纳它的浮动子元素——同时使其在父盒模型中水平居中。这就产生了一个问题：你无法用普通的办法将浮动元素的左边距或右边距设置为auto，也没有float:center这样的值存在。难道就没有办法来解决这个问题了吗？

事实上是有办法的。在CSS宗师Paul O'Brien的文章何时浮动元素才不成其为浮动元素?中说明了该问题的解决办法。它涉及到额外的包装元素，不过这个你应该不难接受。这个办法的原理是使用相对定位，关于这一点我们将在下一篇文章 CSS 静态及相对定位中讨论。通过将包装元素向右移动，然后将浮动元素向左移回，就可以将一个宽度未知而收缩包围的浮动元素居中了！（明天你就可以用这个来给你的搭档留下深刻印象。这招可是屡试不爽的。）

让我们来试一试。在下面的例子中你将为你的网页添加一个水平菜单栏，该菜单栏是由一张带浮动项的无序列表而来的。

将下面的标记插入到HTML文档的<body>标签后：

程序代码

<div class="wrap">

  <ul id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">News</a></li>

    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
  </ul>

</div>

<!--Internet Explorer needs this-->
<div class="clear"></div>

在样式表中添加如下规则，来样式化该菜单：

程序代码

#menu {
  margin: 0;
  padding: 0.5em;
  font-family: Verdana,sans-serif;
}

#menu li {
  float: left;
  list-style-type: none;
  margin: 0 0 0 0.5em;
  padding: 0.25em;
  background-color: #600;
  color: #ff9;
  border: 2px solid #f00;
}

#menu a {
  color: #ff9;
  text-decoration: none;
}

.wrap {
  float: left;
  margin-bottom: 2em;
}

.clear {
  clear: left;
  height: 1px;
  margin-top: -1px;
}

保存这两个文件，刷新浏览器页面。可以看到你的菜单位于页面的左上角。下面我们来使它水平居中。
按照下面的代码修改.wrap规则，从而使包装元素移到页面中间：
程序代码
```
.wrap {
  float: left;
  margin-bottom: 2em;
  position: relative;

  left: 50%;
}
```
这样菜单就会从页面的水平中心开始了，但这可不是我们想要的——它离右边太近了，因此你得将它向左边移回来一点。移动的距离应当等于其宽度的一半，也就是包装宽度的一半，因此我们将其移动-50%.
将#menu规则改成下面的代码：
程序代码
```
#menu {
  margin: 0;
  padding: 0.5em;
  font-family: Verdana,sans-serif;
  position: relative;
  left: -50%;
}
```
现在菜单就居中了；唯一的问题是可能会有一根水平滚动条，视列表和浏览器窗口的宽度而定。这是因为你曾经将包装元素移到屏幕的中间；如果列表的宽度大于浏览器窗口宽度的一半的话，它的一部分就会跑到画面之外。
52. 你可以通过在适当的父元素上设置overflow:hidden来隐藏溢出的部分，从而去掉滚动条，在本例中，包装元素的父元素是body。有时我们不能对body元素设置溢出隐藏，那你就需要给包装元素再建一个包装；不过在本例中是可以对body元素进行设置的。

将下面的规则添加到样式表中：
程序代码
```
body {
  overflow: hidden;
}
```
事实上，还有一个问题。如果你在IE上观看这段代码的效果的话，你会发现它还是不能很好地工作。解决的办法是将浮动列表本身，但这仅限于IE浏览器，因为它会使其它的浏览器崩溃。你可以通过一点小伎俩来确保只有IE才能应用这个规则，从而避开这个问题。

将下面规则加入到样式表中：
程序代码
```
* html #menu {
  float: left;
}
```

漏洞！
浮动和清除非常有用，但可惜的是大多数——即使不是全部——浏览器在这些属性的实现上都有漏洞。IE6在浮动上有一大堆稀奇古怪的问题，包括内容消 
失，边距加倍和著名的3像素慢移漏洞等等。但是，在提到浮动和清除时，就连Firefox和Opera浏览器也不是完全没有漏洞的。位置就是一切 
是一份宝贵的资源，它将这些漏洞一一罗列出来——与此同时还给出了在大多数情况下的解决办法。
总结
浮动一个盒模型是指在其父元素内部，将其尽可能地移动到左边或右边去。浮动盒模型是从文件流中取出来的，并不会影响到它的父盒模型或随后的块状盒模 
型，但是相邻的线框会被缩短。如果先前的浮动元素导致某行的空间不够容纳某个浮动盒模型的话，该浮动盒模型会下移到适合它的地方（或者直到没有其它浮动元 
素的地方）。
当某个内联盒模型被浮动时，它将变成块状盒模型。如果某个块状盒模型被浮动，而又没有显式指定其宽度的话，它就会收缩包围以适应自身内容的宽度。
清除浮动的功能是在必要的时候将页面内容下移，直至页面内容的顶端位于指定方向上所有浮动盒模型的底边之下为止。
使收缩包围的浮动盒模型居中可以通过添加包装元素以及对相对定位的明智应用来完成。

如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！点击进入论坛

您可能感兴趣的文章:

发表评论 (211人查看，0条评论): 请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。

昵称：

最新评论

------分隔线----------------------------

上一篇：再谈 Web 字体的现状与未来
下一篇：CSS网页布局开发时的常见问题小结

大家感兴趣的内容

浮动及清除网页设计员必备的两个工具

一些乏味的理论

浮动是如何工作的？

细节点

多个浮动元素

浮动元素的边距

清除

浮动元素的包含

Shrink-wrapping收缩包围

浮动元素的居中

您可能感兴趣的文章:

公司信息

快速入口

其它栏目

业务咨询