辛红

[摘 要] 主要讲述了运用最热门的HTML5超文本标记语言制作网页，结合使用CSS3层叠样式表语言可完善交互式网页的布局，重点介绍浮动与清除浮动的应用案例，体现加入CSS样式表后网页优化的效果，同时突出浮动与清除浮动在网页布局中的重要性。

[关 键 词] CSS样式；浮动；清除浮动

[中图分类号] TP393 [文献标志码] A [文章编号] 2096-0603（2017）31-0191-01

随着Web前端开发技术的发展，为了更好地实现网页的交互性，HTML與CSS技术均升级到最新版本HTML5与CSS3，为了体现CSS3版本在网页布局中的优越性，特针对其中重要的技术应用案例进行解析。

一、CSS简介

单纯使用HTML标记属性对网页进行修饰与排版存在很大的局限与不足，如要优化网页布局，并且维护方便，就需要使用CSS实现结构与表现的分离。

CSS以HTML为基础，提供了如字体、颜色、背景的控制及整体排版等丰富的功能，可以针对不同的浏览器设置不同的样式，既可以嵌入在HTML文档中，也可以是一个单独的外部文件，本文应用举例使用内嵌式样式表文件。

二、CSS3浮动应用举例

（一）元素的浮动

通过设置CSS中浮动属性float可以使页面元素脱离标准文档流的控制，移动到其父元素中的指定位置，可以对页面重新排版，改变网页中默认元素从上到下或从左到右的排列顺序，使原来单调、混乱、呆板的网页布局变得更加丰富、合理、灵活。具体应用如图1所示。

（二）清除浮动

1.清除浮动举例

由于浮动元素不再占用原文档流的位置，使用浮动时会影响后面相邻的固定元素，如图2所示。其中的段落文本受到了周围元素浮动的影响，产生了位置上的变化。如若避免浮动对其他元素的影响，就需要清除浮动，如图2所示。

2.清除浮动的方法

当给多个子盒子定义左浮动，而不给其父元素设置高度时，父元素不能自适应子元素的高度，将会变成一条直线。而子元素和父元素为嵌套关系，不存在左右位置，因此不能使用clear属性清除子元素浮动对父元素产生的影响。现介绍三种常用清除浮动的方法如下。

（1）使用空标记清除浮动

在浮动元素之后添加空标记，空标记可以为