布局（一）float/absolute/relative的原理

参考链接：absolute绝对定位的非绝对定位用法
参考链接：CSS 相对|绝对(relative/absolute)定位系列（一）
参考书目：HeadFirstHTML与CSS

基础

页面流

float

float属性

所有的浮动元素都必须有一个width。

float过程

设置元素为#id{float：right;width:200px;}
1. 首先浏览器将元素流入页面，从文件最上面开始，逐步移向末尾的元素。
2. 浏览器遇到浮动元素时，会把它尽可能的放到最右边。还会从流中删除这个段落，好像它浮在页面上一样。
3. 由于段落已经从正常流中删除，所以其他元素会填在这里，像没有存在过这个元素一样。文档中正常流的块元素会存在于浮动元素的下方。（使用clear：left/right/both消除块元素上方的浮动遮盖）
4. 但是，其他块元素的内联元素，定位时，会考虑浮动元素的边界，因此会绕着浮动元素。

顺序

1. 若要让元素在某个元素后面浮动，要确保浮动元素的html放在前面元素的下面。
2. 一般地，在功能受限的浏览器中，看到的页面是写页面时的元素顺序。当希望主内容在最前面，然后才看到某种形式的边栏或导航。
3. 所以，考虑浮动时，可以考虑浮动主内容区，取代浮动次要区域。

对内联/块元素的影响 **

参考链接：float对内联元素和块元素的影响

对内联元素

1. 当display属性不等于none，设置对象float浮动时，对象将被视作块对象(block-level)，即display属性等于block。内联元素此时可以设置高宽，内外边距等属性。但不占据一行，相当于inline-block。
2. float在绝对定位和display为none时不会被应用。对应的脚本特性为stylefloat(ie或cssfloat(非ie)。(注意这里为stylefloat或cssfloat，而不是float)

对于块元素

1. 相当于变成了：dispaly:inline-block元素，最明显的是宽度自适应发生了变化。
2. div的默认宽度是width:auto;意思是自动调整宽度.在不带float的情况下,div的宽度会自动调整至最大化,而在带float的情况下则正好相反,它会自动调整至最小化.

absolute

absolute过程

1. 浏览器将此元素从流中完全删除，其他块元素与内联元素完全不知道这个元素的存在。（当设置top与left时才会完全脱离）
2. 然后浏览器将这个元素放在top 和 right 指定的位置上（或者bottom 与left）。（结果相对于最近的relative属性的祖先标签定位；如果没有，就body定位）
3. 允许使用z-index进行分层放置。

position为absolute的元素如果没有设置left, top等值与left:0;top:0;的的效果不一样？

例如一个div中有个absolute属性元素，其没有left或是top值，其会像个普通的inline-block属性元素一样静静地呆在这个div里。

但是一旦设置了left:0；top:0；这个absolute元素立马变身，直接从DOM tree里面脱离，独立于文档流。结果相对于最近的relative属性的祖先标签定位（如果没有，就body定位）。

由于我们平时使用absolute都离不开left，top之类的值，所以才会概念不清。

总结区分：

float元素仍然由浏览器确定它的位置。
absolute则完全由用户指定。
相同点：
都可以对任意元素指定性质，包括内联元素与块元素。

relative

过程

1. 元素正常流入页面
2. 页面显示之前要进行偏移

几个简单布局

1. 流体布局 liquid layouts
   布局会填满可用空间
2. 冻结布局
   为所有内容的整体（body）设置固定宽度
   3.凝胶布局
   在冻结布局的基础上，使得整个内容居中（margin:auto）