网页浮动布局方式和伸缩盒布局方式的比较研究

岳丹丹

（兴义民族师范学院， 贵州 兴义 562400）

网页浮动布局方式和伸缩盒布局方式的比较研究

岳丹丹

（兴义民族师范学院， 贵州 兴义 562400）

浮动布局方式是当下流行的网页布局技术，伸缩盒布局方式是较新的网页布局技术，对浮动布局方式和伸缩盒布局方式进行了比较研究，用简洁的代码实例阐述了伸缩盒布局的优势所在。

网页布局、浮动布局float、伸缩盒布局Flexbox

Abstract:Float layout is the popular web development technology,the layout of the flexbox is a relatively new web technology.This paper compares float with flexboxlayout in web application research,and some simple example are given toillustrate the advantage offlexboxmethod.

Key words:Web layout；float；flexbox

网络技术的迅速发展，使得网络技术融入到了人们的日常生活、工作和学习中。互联网上各种网站和基于Web的应用大量涌现，这些都需要用网页形式进行呈现。网页布局设计指的是根据网站内容和建站目的等基本要素，运用版面设计原理，将网页上的视觉元素进行合理配置与表现的过程。[1]在网站规划建设中，网页布局设计是至关重要的环节，网页布局设计是否美观、规范、合理，关系到网站能否吸引更多人的眼球，直接反映网站的点击率正是网站的生命所在。所以网页布局越来越受到重视。

一、网页浮动布局方式和伸缩盒布局方式的比较

网页浮动布局是目前常用的网页布局方式，许多主流网站都采用浮动布局的方式实现布局。伸缩盒布局方式是较新的技术，目前主要在移动web中使用。下面对两种布局方式进行比较。

1.浮动布局

浮动（float）是基于CSS的现代Web设计用到的主要功能之一，可以用它来创建多列的网页布局，如无序列表创建导航工具条，不是用table而又可创建类似表格的对其方式等。实现方法主要是：使用float属性。float属性的取值是：none（不浮动），left（向左浮动），right（向右浮动），使元素浮动到左边或者右边而成为一排。浮动可以应用于任何元素。使用float属性后，浮动的元素从正常文档流中脱离出来，同时对布局中的其他元素造成一定的影响。

浮动布局的局限：1）浮动成行的每个块元素的高度必须要一致，否则就会出现“锯齿相错”，例如一个左浮动列表布局，如果第一行有个列表高度高于其他列表，那就在第二行，第一个元素会沿着最高元素的右侧对齐。2）浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及width、height属性，会出现高度塌陷、换行等问题，需要修复其带来的副作用。

浮动布局简单易学，容易掌握，由于网站总体布局改动的几率较小，所以目前PC网站大多仍然使用浮动布局方式。

2.伸缩盒布局

Flexbox（伸缩盒布局）是CSS3中一个新的布局模式，为了现代网络中更为复杂的网页需求而设计。Flexbox由伸缩容器和伸缩项目组成，通过设置元素的display属性为flex可以得到一个伸缩容器。设置为flex的容器被渲染为一个块级元素，同时可以在不使用浮动（float）和定位（position）的情况下实现块级（block）元素的水平排列，并且可以把父元素的宽度按照比例分配子元素且子元素自适应高度。[2]

Flexbox（伸缩盒布局）的优势：轻松实现自适应、独立的高度控制与对齐、独立的元素顺序、指定元素之间的关系、灵活的尺寸与对齐方式等。这些功能在以前的实现方式是使用表格、浮动、行内块元素和其他CSS属性来配合完成。Flexbox（伸缩盒布局）使得这些布局工作变得轻松起来。同时，PC浏览器网页必须优化以适应于智能手机屏幕的场景。不仅仅需要元素减小尺寸，它们排列的顺序方式也必须改变。Flexbox（伸缩盒布局）很容易实现这种需求。

Flexbox（伸缩盒布局）的不足：Flexbox（伸缩盒布局）规范的相关工作从2009发布到2012年9月最终定下来，W3C认为当前的语法是稳定的，并鼓励浏览器开发商去实现它。最新版本2012年版，除了Safari浏览器不支持外，其他最新浏览器都支持这个版本。但很多浏览器厂商都拥有一个私有前缀，增加了使用时的麻烦。

二、布局网页实例比较

网页设计中，横向三列布局在网页布局中经常会使用，下面通过用两种方式实现横向三列布局来进行比较。

网页主体结构代码如下：

代码说明：主体部分主要分为三块，标准文档流下三块默认为垂直排列。如图1所示。

图1 默认文档流布局

1.浮动布局

浮动布局代码如下：

实现效果如图2所示：

图2 浮动布局效果

当去掉/*padding:10px;*/行的注释，即增加文本的填充距离时，会出现错位和换行的情况，如图3。

图3 增加文本填充距离的效果

2.伸缩盒布局

伸缩盒布局实现代码如下：