对网页浮动布局技术应用的深入研究

郑伟

摘要：网页布局是网页制作过程中非常重要的技术环节，也是网页制作过程中难度较大的一个部分。如何正确合理地进行网页布局无论是对于网页内容的合理呈现还是对于提升网页整体的美观程度都是非常重要的。浮动布局作为当下网页制作中最主流的一种布局技术在实际应用中被广泛采纳，该文通过对浮动原理的分析、浮动问题的提出与解决及浮动案例的展示进行深入的探讨和研究。

关键词：浮动布局；盒子模型；浮动；float

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2016）28-0220-03

1 背景

随着互联网的迅速发展，网站已成为信息传播和共享的重要媒介之一，一个好的网站不仅要有好的信息数据，如何将数据有效的呈现和传递给用户同样是不可忽视的。如何将数据更加有效的呈现出来呢？影响的因素主要在2个方面，一是网页界面的图形设计，包括颜色、形状、风格等，另一个因素就是内容的布局了，这直接影响到用户对数据的阅读[3]。

网页布局是网页制作中必不可少的技术环节，也是网页制作中最容易出现问题的地方。通过网页技术的发展过程来看，网页布局主要经历了以下几个技术发展阶段：

文档流布局：这种布局主要出现在网页发展的早期，页面内容以大量文字和极少图片构成，利用页面默认的排列方式，即从左到右，从上到下的原则对内容进行原始呈现，其特点是简单易实现，缺点是无法实现多媒体下的复杂布局。

表格布局：此种布局是专为解决文档流布局的缺陷而发明的一种布局方式，就是利用表格的网格排列来实现对内容的摆放，这种布局的特点是应用直观，容易上手，缺点是网格彼此关联性太强，效率太低，维护成本过高。其实表格布局是一种对表格的错误应用，表格是用来批量呈现具有相同特点的数据的，类似excel表格。

浮动布局：有的书本上也称为div+css布局[2]。此布局是将网页元素看成一个个独立的盒子，通过盒子的自由排列实现布局，这种布局的特点是排列的个体比较独立，易操作和维护，效率较高，缺点是难度相对略大。

通过比较可见，浮动布局是比较适用的一种布局方式。

2 网页布局中的盒子元素

2.1 盒模型

要正常进行网页布局就不得不首先了解盒模型的概念。何为盒模型？盒子只是一个容器，用来盛放网页呈现的内容，所以通俗的讲，就是将网页里面具有高宽属性的元素看成一个盒子容器，通过控制盒子的大小、坐标等属性，合理排列盒子的位置，实现正常的网页布局[6]。

2.2 盒模型的标准

因为技术发展的历史原因，网页标准在浏览器的竞争中没有实现彻底的统一起来[4]，盒子模型同样如此，不同浏览器都有自己对盒模型的解释标准，一方面是以IE为代表的盒模型标准，另外一方面是以W3C标准为代表的标准盒模型。如图1：

W3C盒模型标准

盒子的实际宽度=边框宽度（border-width左右） + 内边距（padding左右）+ width

盒子的实际高度=边框高度（border-width上下） + 内边距（padding上下）+ height

IE盒子模标准

盒子的实际宽度=边框宽度（border-width左右） + width

盒子的实际高度=边框高度（border-width上下） + height

如何在所有浏览器中实现统一的盒模型标准呢？这与网页文档中的文档声明doctype有很大关系。当网页中显示声明了doctype文档声明，则浏览器会按照W3C标准盒模型解析，反之则浏览器会按照自己的标准解析盒模型。

2.3 盒元素的分类

网页中的盒元素可分为块状元素与行内元素。

块状元素：默认情况下，具有自动换行特点，通俗讲就是独占一行，具有标准盒子模型的所有属性。

行内元素：顾名思义，就是一行里面的元素，其特点当然就是能与其他行内元素同在一行排列，并且默认情况下无法改变大小。

行内块状元素：从字面意思可以理解，这类元素既有行内元素一行排列的特征，也有块状元素具有改变大小的特点。

3 盒元素在网页中的浮动

通过盒模型的特点可发现一个难题：让一个可以设置大小的元素横着排列似乎不太容易。通过网页元素在页面中排列的方式可以将网页布局分为很多种，例如流式布局、浮动布局、弹性布局等等。其中，浮动是布局中最常用的一种方式。

3.1 浮动属性float

一个元素如果浮动，将会产生什么效果呢？浮动的元素会脱离原来的文档流，向左或者向右排了，CSS属性中的表示为float，属性值为：left、right、none、inherit，分别表示向左浮动、向右浮动、无、继承父层浮动属性

3.2 浮动元素的特点

1）无论是行内盒子还是块状盒子，浮动后的盒子都具有可控的大小属性。

2）一个浮动元素只能与相邻的浮动元素产生向左或者向右的浮动横向排列，直到第一个浮动元素碰到其父层元素的内边缘[1]。

3）因为浮动元素脱离文档流而不占位置，其留出的空间只能被其相邻的块状元素占用，而相邻的行内元素则会与其形成环绕效果[1]。

如图2所示：

4 消除浮动的连带影响

如果仅仅掌握float属性的使用方法是无法正确地完全网页布局的，因为浮动元素脱离文档流对文档内容的重新排列产生了一系列的影响，如图3所示：

由上图可以看到，因为浮动造成了元素之间产生了错误的排列，而这一切的根本原因就是浮动元素脱离文档流而不占用文档中的空间，使得浮动元素的父层无法捕捉到浮动元素的大小造成空间大小上的计算误差。如何解决这个问题呢？这里主要介绍三种常见的方法：

1）clear属性解决方案

如果一个容器内，有元素使用了浮动，那么只需在此容器的末尾添加一个空的块状盒子，如div等，给此空盒子添加样式清除属性clear，格式如下：

2）父层overflow属性解决方案

此种情况只能使用在容器中的所有元素都浮动的情况下，此时只需要在浮动元素的父层上添加overflow属性即可，格式如下：

3）给浮动元素强制定义固定高度

此种方法是效率最底下、最不建议使用的一种办法，但也是解决问题最直接的一种方法，建议尽量不要固定元素的高度，要保证网页在垂直方向上能根据内容的多少自适应大小，以免发生内容溢出的现象。

4 实战验证

这里我们以一个导航条的制作为例，来详细说明一下浮动的用法。我们将实现如图4的导航条效果。

大多数情况下，页面的导航条都会使用列表来表示[5]。列表是用来表示具有相同特征的一类数据的最佳选择，而导航按钮正是满足这种特征。由于导航按钮没有必要的先后顺序，因此通常情况下，使用无序列表ul来表示导航条。

导航条的HTML结构与浏览器运行效果如图5所示：

接着便可以通过CSS样式来对标签进行修饰，具体代码如下：

#nav li{ float：left； width：100px； text-align：center； line-height：50px；}

以上代码是将每个导航按钮设置为100像素宽度，文本在按钮中水平与垂直居中，并通过float属性将所有的按钮排成一行。接下来就给整个导航条设置一个背景颜色，非常简单，代码如下：

#nav{background-color：#}

做到这里，我们就可以在浏览器里面看到导航条效果了。是真的吗？当你运行时，你会惊奇地发现，并没有出现蓝色的背景，如图6所示：

为什么会这样呢？这正如我们在图3看到的最后一种情况，所有的li都浮动了，对于ul来说，li是没有大小的，因而，此刻ul的高度实际是为0的，当然也就看不到背景颜色了，如何解决呢？答案是很简单的，针对前面第三节讲的解决浮动影响的3种方法，这里我们选择第2种方法，所有子元素都浮动的情况下，只需在父层添加overflow：hidden即可。最终修改后的样式为 #nav{background-color：#；overflow：hidden；}，至此就可以看到图4一样的效果了。

5 结束语

通过上述对浮动的分析和案例演示，我们可以清楚地了解到浮动的原理及解决方案，总体难度并不大，只是需要使用者认真的分析和理解浮动布局的实际情况，按情况解决问题即可。浮动布局是网页布局中的一种重要的布局方式，也是比较流行和成熟的布局方式，熟练理解和掌握是十分有必要的！

参考文献：

[1] W3school[EB/OL].http：//http：//www.w3school.com.cn.

[2] 谢冠怀. 辨析响应式网页的浮动布局和伸缩盒子布局[J]. 现代计算机： 专业版， 2014（10）： 42-46.