CSS浮动和定位理论知识

浮动是CSS布局中重要理论，在网页中大部分采用浮动来达到分栏的效果。CSS网页布局采用两种方式，一种是浮动布局，另一种则是定位布局。

在浮动和定位之前，我们先了解什么是文档流?文档流是浏览器解析网页的一个重要概念，对于一个html网页，body元素下的任意元素，根据其前后顺序，组成组成一个个上下关系，这便是文档流。浏览器根据元素的顺序显示其在网页中的位置。文档流是浏览器的默认显示规则。

1．浮动定位

浮动定位是利用float属性的left和right值分别让对象向左或向右浮动。

元素在作浮动定位时，不论该元素本身是什么，只要其是浮动的，就会生成一个块级框，会像块级元素一样摆放和表现。

1）浮动定位应用场合

当需要网站具有较强的分辨率及内容大小的适应能力的时候，采用浮动定位。浮动定位是将布局浮在窗口之中，而非固定在窗口的某个位置，因此主要是针对非固定类型的网页进行设计。

①距中布局

对一个元素距中，是相对于它的左右两边而言。若浏览器窗口的宽度不固定，那么需要用div，采用针对左右margin的auto设置，以便让元素距中浮动。

②横向宽度百分比缩放

若有一个二列宽度自适应布局，当左列的宽度无法固定时，则右列的位置就无法固定，因此右列必须采用浮动到左列的右边贴近，才可以适应左列宽度的随时变化。

③需要借助margin,padding,border等属性

浮动布局能通过控制对象的边框，间距等精确地控制其之间的位置关系，由于每个对象的外边距不一样，导致身边的对象位置发生变化，因此有些看似固定布局的网站，在采用margin来控制对象占位的同时，也需要使用浮动定位。

另外还有其它各种情况的选用，但关键的一点，就是要布局能够灵活地变化，这是浮动布局初衷。从实际工作来看，大多情况下都围绕浮动布局进行设计，所以掌握浮动定位是CSS布局的重中之重。

2．绝定定位与相对定位

1）绝定定位

凡是采用position:absolute;之后，对象便开始进行绝对定位，其主要通过设置对象的top,right,bottom及left四个方向的边距值来实现。一旦对象被设置绝对定位，就完全脱离了文档流，独立于其它对象而存在。

绝对定位使元素位置与文档流无关，因此不占据空间。如下图：

绝对定位的元素是相对于最近的已定位的祖先元素，若不存在已定位的祖先元素，那它的位置就相对于最初的包含块。

由于绝对定位与文档流无关，因此可以覆盖页面上的其它元素；另外还可以通过设置z-index属性来控制这些框的堆放次序。

2）深度（z-index）

CSS允许我们通过设置对象的z-index属性，来对其重叠的先后顺序进行操作，也就是z轴的顺序。

以z-index的数值大小为准，大值对象的层级位于小值对象上面。如下代码：

3）相对定位

相对定位就是浮动定位与绝对定位的扩展方式。相对定位使得被设置元素保持与其原始位置相对，并不破坏其原始位置的信息。如下图所示：

如果对一个元素进行相对定位，可以通过设置水平或垂直位置，让这个元素相对于其起点进行移动。

在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

4）绝对定位与相对定位应用场合

①不规则网页设计

有些网页设计不会走分栏或块状布局的路线，而是随机地布置位置。在这种情况下，往往采用绝对定会或相对定位的各种组合方式来进行布局。

②在画面上的设计

若需要一个元素覆盖在整个画面上，但不希望破坏原有的结构，这时可以采用绝对或相对定位，使得某个或者某些对象覆盖于画面之上，比如门户网站常出现的广告，便是相对或绝对定位的设计

③交互式设计

下拉菜单一种常见的交互式设计，由于其菜单子项只在鼠标移上时才出现，因此是一种

需要覆盖在画面上方的设计。

另外一种情况，就是子菜单需要根据父级鼠标位置而变化，需要相对于鼠标所在的父级位置进行定位，这是一种相对定位。在这两种设计情况下，原则是当子菜单出现时，不破坏其它元素的布局，就需要其浮于画面之上，这时候便可以采用绝对或相对定位进行处理。