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

参考链接：absolute绝对定位的非绝对定位用法

参考链接：CSS 相对|绝对(relative/absolute)定位系列（一）

参考书目：HeadFirstHTML与CSS

基础
float
float属性

float过程

顺序

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

对于块元素

absolute
absolute过程

position为absolute的元素如果没有设置left top等值与left0top0的的效果不一样

总结区分

relative
过程

几个简单布局

基础

页面流

float

float属性

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

float过程

设置元素为

#id{float：right;width:200px;}

1. 首先浏览器将元素流入页面，从文件最上面开始，逐步移向末尾的元素。

2. 浏览器遇到浮动元素时，会把它尽可能的放到最右边。还会从流中删除这个段落，好像它浮在页面上一样。

3. 由于段落已经从正常流中删除，所以其他元素会填在这里，像没有存在过这个元素一样。文档中正常流的块元素会存在于浮动元素的下方。（使用clear：left/right/both消除块元素上方的浮动遮盖）

4. 但是，其他块元素的内联元素，定位时，会考虑浮动元素的边界，因此会绕着浮动元素。

顺序

若要让元素在某个元素后面浮动，要确保浮动元素的html放在前面元素的下面。

一般地，在功能受限的浏览器中，看到的页面是写页面时的元素顺序。当希望主内容在最前面，然后才看到某种形式的边栏或导航。

所以，考虑浮动时，可以考虑浮动主内容区，取代浮动次要区域。

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

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

对内联元素

当display属性不等于none，设置对象float浮动时，对象将被视作块对象(block-level)，即display属性等于block。内联元素此时可以设置高宽，内外边距等属性。但不占据一行，相当于inline-block。

float在绝对定位和display为none时不会被应用。对应的脚本特性为stylefloat(ie或cssfloat(非ie)。(注意这里为stylefloat或cssfloat，而不是float)

对于块元素

相当于变成了：dispaly:inline-block元素，最明显的是宽度自适应发生了变化。

div的默认宽度是width:auto;意思是自动调整宽度.在不带float的情况下,div的宽度会自动调整至最大化,而在带float的情况下则正好相反,它会自动调整至最小化.

absolute

absolute过程

浏览器将此元素从流中完全删除，其他块元素与内联元素完全不知道这个元素的存在。（当设置top与left时才会完全脱离）

然后浏览器将这个元素放在top 和 right 指定的位置上（或者bottom 与left）。（结果相对于最近的relative属性的祖先标签定位；如果没有，就body定位）

允许使用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

过程

元素正常流入页面

页面显示之前要进行偏移

几个简单布局

流体布局 liquid layouts

布局会填满可用空间

冻结布局

为所有内容的整体（body）设置固定宽度

3.凝胶布局

在冻结布局的基础上，使得整个内容居中（margin:auto）