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

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

关键词：浮动布局；盒子模型；浮动；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，格式如下：