第11章 浮动与定位.pptVIP

第11章 浮动与定位 从本章开始的3章，都是关于网页布局排版的内容。前两章主要介绍基础知识，第13章将介绍具体的网页排版技术。 浮动（Float）可以说是一个设置起来简单，使用起来却很容易产生迷惑的CSS属性。它能够对页面元素的位置产生很大的影响。由于利用CSS进行网页排版已经逐渐成为业内事实上的标准，Float属性的利用率也越来越高。 定位（Position）也是一个非常重要的样式属性，有了三种定位方法，我们就可以随心所欲地在网页上摆放各种标签了。 本章将对浮动和定位进行详细地讲解，为进一步的学习打好基础。 11.1 浮动属性初探 浮动属性，在CSS技术中用Float来表示。Float属性在网页中主要有两个作用： 用于标签周围内容的环绕； 用于网页整体的排版。 本章先介绍第一个，也是最基本的使用方法；第13章将介绍第2个作用。 11.1.1 设置Float属性的语法 Float属性只能通过CSS样式规则进行设置，可选择的值共有3个： Left：标签向左边浮动。 Right：标签向右边浮动。 None：不浮动。 先不管每个参数具体的含义，下面了解一下应用它后，网页有什么变化。 11.1.2 用Float属性设置图文环绕 最初，人们设置Float属性是为了实现网页中图片与文字的环绕效果。通过两幅图片与文字的排列方式对比，显示了Float的作用： 11.2 浮动属性详解 本小节对使用Float属性中出现的具体问题进行详细的讲解。在进入正题之前，首先介绍一些预备知识。 11.2.1 文档流 理解浮动属性，首先要从文档流谈起。文档流分为两种，分别是普通文档流和特殊文档流。 【普通文档流】 普通文档流的名字起得有些正统，实际上却很好理解。一般来说，我们打开网页时，都是上方的部分首先显示出来，然后是中间部分，最后才是底部，直到显示完成。这样的顺序体现在HTML代码中就是先写的标签先显示，后写的标签后写显示。整个过程好像瀑布的水从上流到下，因此命名为普通文档流。 【特殊文档流】 既然有普通文档流，那么就肯定有特殊文档流，否则不会在前面增加“普通”两个字。所谓特殊文档流，就是指那些在页面载入浏览器的时候，不按照前面所讲述的顺序，脱离普通文档流而单独显示的标签。还是利用瀑布来举例子：瀑布倾泻而下的时候，部分水流碰到了岩石，导致下落方向与瀑布主体不同，它们就可以叫做“特殊文档流”。 实际上，普通文档流可以解释成网页的主流，而特殊文档流则是网页的支流，主流和支流完全独立。浏览器在显示一个网页的时候，总是先显示主流，再显示支流。 下面再介绍一个相关的概念：浏览器视窗。 11.2.2 浮动属性的特点与实现过程 前文中我们已经看到了图片应用浮动属性后的效果，那么在图11-1中，Float是如何将它浮动到文字的右边的呢？这还得从它的特点说起。 为了描述上的简单，本章中统一将应用了Float属性的标签简称为Float标签。 标签一旦应用了Float属性，它就变成了一个符合盒模型的页面元素，即拥有了内外边距、边框等特性。 11.2.3 浮动标签的折行显示 如果一个Float标签水平浮动后，浏览器发现没有足够的位置安放它，那么浏览器将如何处理？ 答案是将预留的这个“停车位”下移，直到发现可以容纳的位置为止。 11.2.4 Float属性的影响范围 Float标签显示时，HTML代码中出现顺序在它前面的标签不会受到影响，不会产生环绕；只有在它后面的标签内容才会出现环绕，如代码所示。 11.2.5 多幅图片与文字的环绕 代码11-3通过对一幅图片应用Float属性，实现了文字环绕图片的效果。更普遍的情况下，网页会包含多幅图片，如果对多幅图片设置float属性，又会发生什么呢？下面我们来进行几个试验。 代码11-4是试验的基本网页，其中的三幅图片都没有设置float属性。 11.2.6 利用Clear属性清除浮动 设置了float属性，但有时候又不需要后面的某些标签在周围环绕，Clear属性就可以大显身手了。Clear属性可以说是float属性的逆操作，它的作用就是决定当前的块元素标签是否和周围的float标签在同一行上显示，有如下几个数值可以设置： Left：不和左边的float标签显示在同一行上。 Right：不和右边的float标签显示在同一行上。 Both：综合了left和right两个设置。 None：不进行设置。 11.2.7 Float标签的左右逢源 前面所举出的例子都是标签使用单一的float值，比如均为left的情况。实际上，不同标签的float属性完全可以不同，比如left和right的配合。这种左右的配合在网页布局排版方面应用非常广泛，本书将在第13章进行具体的介绍。为了展示float属性左右逢源的能力，下面举出一个