Div+css 浮动与定位

浮动与定位

浮动（float）可以说是一个设置简单，使用起来却很容易产生迷惑的CSS属性。它能够对页面元素的位置产生很大的影响。由于利用CSS进行

网页排版已经逐渐成为业内事实上的标准，Float属性的利用率也越来越高。

定位（Position）也是一个非常重要的样式属性，有了3种定位方法，我们就可以随心所欲的在网页上摆放各种标签了。

首先介绍一下浮动（float）

浮动属性初探

用于标签周围内容的环绕

用于网页整体的排版

设置Float属性的语法

FLOat属性只能通过CSS样式规则进行设置，可以选择的值共有一下3个：

Left:标签向左浮动

right；标签向右浮动

none：不浮动

浮动属性的详解

文档流

理解浮动属性，首先要从文档流谈起。文档流分为两种，分别是普通文档流和特殊文档流。

【普通文档流】

普通文档流的名字有些正统，实际上却很好理解，一般来说，我们打开网页时，都是上方的部分首先显示出来，然后是中间部分，最好才是是

底部，直到显示完成。这样的顺序体现在HTML代码中就是先写的标签先显示，后写的标签后显示。整个过程好像瀑布的水从上流到下，因此命

名为普通文档流。

【特殊文档流】

既然有普通文档流，那么肯定有特殊文档流，否则不会在前面增加“普通”两个字。所谓特殊文档流，就是指那些在页面被加载浏览器的时候

，不按照前面所讲述的顺序，脱离普通文档流而单独显示标签，还是利用瀑布的例子：瀑布倾泻而下的时候，部分水流碰到了岩石，导致下落

方向与主体不同，他们就可以叫做“特殊文档流”

实际上，普通文档流可以理解成网页的主流，而特殊文档流则是网页的支流，主流和支流完全独立。浏览器在显示一个网页的时候，总是先

显示主流，在显示支流。

浏览器处理FLOAT标签的过程

在页面进行显示的过程中，浏览器一旦发现有Float标签，将主要进行如下几步操作。

1.在普通文档流中定位：浏览器首先在普通文档流中给Float标签定位，依据它的宽度，预留出一块地方供它显示，好比预留的停车位。

2.脱离普通文档流：浏览器将这块“停车位”从普通文档流中脱离出来，不跟着主流标签一起显示。

3.浮动过程：“停车位”现在已经处于特殊文档流之内，根据Float属性的具体设置，left或者right，浏览器将“停车位”水平浮动到尽可能远的左边或者右边，直到碰到别的标签边界或者浏览器的边框为止。

4.显示：“停车位”已经妥当，浏览器把标签安放到这个位置上并显示它。

这个过程对理解Float属性很重要。

5.图片首先在段落中定位，确定宽度、高度，预留位置。

6.这块位置根据Float属性值right，水平浮动到尽可能远的右边。由于段落右边没有其他标签，所以它碰到浏览器的右边框后停止。页面上的文字因为右边位置被占，往左移动，形成环绕。

浮动与折显

如果一个Float标签水平浮动后，浏览器发现没有足够的位置安放它，浏览器会将这个“停车位”下移，直到发现可以容纳的位置为止。

Float属性的影响范围

Float标签显示时，HTML代码中出现顺序在它前面的标签不会受到影响，不会产生环绕，只有在它后面的标签内容才会出现环绕

多幅图片与文字的环绕

第1幅图片应用FLOAT属性后，其余的图片和文字就环绕在旁边，同时后两幅图片和内容文字还是处于一行的。

无论第2幅图片还是第3幅图片应用FLOAT属性，第1幅图片在代码顺序上总在他们的前面，因此不受float属性的影响，依然处于页面的最左侧。

设置了float属性的图片要显示在当前行尽量靠左的位置，由于当前行已经容纳不下（图片应用FLOAT样式后宽度变大），最左边已经被占满，

只好另起一行显示，而其他内容，包括未应用float属性的一副图片和文字部分则环绕显示。