absolute 和float

Posted 2020-08-20 半夏微澜ぺ

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实现元素的隐藏：

 

.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切换的，但是这会让键盘使用用户产生不解与疑惑的。

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

 

 

来自：

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/