absolute 和float

position:absolute与float:left是近亲

包裹性

包裹性换种说法就是让元素inline-block化，例如一个div标签默认宽度是100%显示的，但是一旦被absolute属性缠上，则100%默认宽度就会变成自适应内部元素的宽度

float也是典型的inline-block化元素，这种元素的inline-block化适用于任何水平的标签。例如平时我们要让span标签支持width属性，可能要设置：

span { display:block; width:100px; }

但是，有float:left/position:absolute撑腰的情况下，display属性就是多余的，可以直接回家喝茶了。

span { float:left; width:100px; }
span { position:absolute; width:100px; }

破坏性

论破坏的功力，绝对定位显然比浮动更甚一筹，但是人们诟病的更多的却是浮动的破坏性。这不难理解，整天在耳边飞来飞去的苍蝇要比不常见的吸血牛虻讨厌。众人已经把浮动当作凡人中的一份子，而对于绝对定位，人们知道，毕竟人家原本隶属天上，能下凡间来帮忙造房子已经不错了，没有必要去苛求指责人家。

浮动的破坏性在于切断line box链，致使高度塌陷，但由于浮动元素仍在凡间（DOM tree），实体是看得见摸得着的，所以其占据的实体位置还是在的。而absolute绝对定位不仅让高度塌陷，又由于从未深入凡间，在凡间没有他的实体位置，所以宽度也是塌陷的。

由于浮动身处凡间，所以其造成的破坏是可以通过其他手段弥补的；但是，绝对定位不属于凡间，其破坏无法修复，因为一是孤独，无人帮忙；二是只有空气，怎能修补。

例如下面的测试：

.div { padding:20px; margin:10px 0 0 10px; background-color:#f0f3f9; float:left; }
.abs { position:absolute; }
<div class="div">
    <img data-src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
    <p>图片无absolute</p>
</div>
<div class="div">
    <img class="abs" data-src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
    <p>图片absolute后</p>
</div>

结果如下截图：

可以看到，图片应该的position:absolute属性后，父标签的高宽都塌陷了，连它的兄弟float都救不了。

absolute属性只是个很普通的属性，跟float:left是个近亲。一个是陨落凡间的恶魔，一个是天空中的恶魔。

所以，很多时候，我们在普通布局中使用absolute时候，只要设置position:absolute就可以了，至于left/top之类的都是浮云，定位什么的就当作普通元素，使用margin定位一样有着刮目的表现的。

一个应用的position:absolute的元素，其实就只是个非常普通的元素，我感觉与应用了float:left的差异仅仅在于宽度的缺失。

（float只是高度确实，但是高度还在，absolute宽度和高度都缺失了）

无定位值的absolute元素可以使用margin定位；其二，无定位值的absolute元素是个没有实际宽度的浮动元素。

absloute+margin实现文字阴影

.text-box {
            width: 500px;
            margin: 50px auto;
            background-color: #f9f9f9;
            padding: 20px;
            color: #ccc;
        }

        .text-box .text-shadow {
            color: #333;
            position: absolute;
            margin: -1px 0 0 -1px;
        }
<div class="text-box">
    <span class="text-shadow">这是一段用来测试的文字，看看是否有投影效果~~</span>
    这是一段用来测试的文字，看看是否有投影效果~~
</div>

效果图：

绝对定位元素需要写在投影文字之前，因为absolute元素实际占据的高度宽度都是0，所以文字可以自然而然的在其下方显示，由于下方的文字颜色较浅，于是便形成投影效果。

此方法很精妙，可惜有小小兼容性差异，IE6下投影方向是水平朝右，IE7是右上方向，需要hack修复。　

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之类的值，所以才会概念不清。

　

absolute实现元素的隐藏：

.hidden{
    position:absolute;
    top:-9999em;
}

　

.hidden{
    position:absolute;
    visibility:hidden;
}

.hidden{
    position:absolute;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

　使用absolute属性控制DOM元素的显隐有三个关键点：页面可用性，回流与渲染，配合JavaScript的控制。　

① 可用性隐藏
所谓可用性隐藏，就是兼顾屏幕阅读器这类互联网阅读辅助设备的隐藏方式。Yahoo! 可用性实验室成员Ted Drake就不同隐藏方法下屏幕阅读器的可用性问题作为测试，结果发现下面两种隐藏方式屏幕阅读器是读不了的。

.completelyhidden {
    display:none;
}

　　

.visibilityhidden {
    visibility:hidden;
}　

如果希望隐藏内容能够被辅助阅读设备识别，就不能使用display:none以及visibility:hidden隐藏元素。可以使用模拟隐藏的隐藏方法，又称可用性隐藏。就是下面两种隐藏方法。

.hidden{
    position:absolute;
    top:-9999em;
}

　　

.hidden{
    position:absolute;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

但是，如果你是希望完全隐藏的，那就可以使用display:none或visibility:hidden。

额外说明：如果隐藏元素含有链接元素或是可获得焦点的控件元素，但是又是使用的可用性隐藏。这些隐藏的链接与控件也是可以响应键盘焦点Tab切换的，但是这会让键盘使用用户产生不解与疑惑的。

所以，从某种意义说，某些情况下，要兼顾屏幕阅读器用户和键盘用户有时候是不可兼得的

与浮动元素一样，绝对定位元素也具有“包裹性”，此“包裹性”适用于任何元素。

那么，浮动元素与绝对定位元素的差别在哪里呢？

我觉得最主要的差别在于：绝对定位的元素脱离了文档流，而浮动元素依旧在文档流中；而这造成的显示上的差异就是：

同处于文档流中的文字实体不会与浮动元素重叠，而会与绝对定位元素重叠。

这就是文字环绕显示的重要原因之一：虽然图片实际占据的高度为0，但是由于其宽度实体存在（包裹性），

同样是content area 实体的文字不会与之重叠（外部的容器盒子containing box(p,div,ul,li)会重叠），这就好比篮球场上站了个植物人，虽然其几乎不可能得分，运球之类，

但是他的实体在那里，它可以阻挡同一水平空间上的同一类型的个体（即人）直接穿过去，要通过，得绕道。但是其无法阻挡整个球队的向前推进。

float：最初的作用就是来实现图文混排的

文字之所以会环绕含有float属性的图片时因为浮动破坏了正常的line boxes。

图片与文字都时inline box元素，但是默认的文字会与图片的下方对其，因为：

line boxes的高度是由其内部最高的inline boxes的高度决定的，所以这里line boxes的高度就是图片的高度。

此时图片与文字是同一box类型的元素（都是inline boxes），是在同一行上的，所以，默认状态下，一张图片只能与一行文字对齐。

而要想让一张图片要与多行文字对齐，您唯一能做的就是破坏正常的line boxes模型。 就是让图片float

来自：

http://www.zhangxinxu.com/wordpress/2010/12/css-%E7%9B%B8%E5%AF%B9%E7%BB%9D%E5%AF%B9relativeabsolute%E5%AE%9A%E4%BD%8D%E7%B3%BB%E5%88%97%EF%BC%88%E4%BA%8C%EF%BC%89/