CSS基础--float的兄弟position:absolute一

当absolute和float同时存在的时候，float属性是无任何效果的。元素一旦position属性值为absolute或fixed，其display计算值就是block或者table。，absolute有一个平时不太被人注意的差异，那就是absolute的自适应性最大宽度往往不是由父元素决定的，本质上说，这个差异是由“包含块”的差异决定的。换句话说，absolute元素具有与众不同的“包含块”
1、absolute的包含块
（1）根元素（很多场景下可以看成是）被称为“初始包含块”，其尺寸等同于浏览器可视窗口的大小。
（2）对于其他元素，如果该元素的position是relative或者static，则“包含块”由其最近的块容器祖先盒的content box边界形成。
（3）如果元素position:fixed，则“包含块”是“初始包含块”。
（4）如果元素position:absolute，则“包含块”由最近的position不为static的祖先元素建立，具体方式如下。
如果该祖先元素是纯inline元素，则规则略复杂：
1)、假设给内联元素的前后各生成一个宽度为0的内联盒子（inline box），则这两个内联盒子的padding box外面的包围盒就是内联元素的“包含块”；
2)、如果该内联元素被跨行分割了，那么“包含块”是未定义的，也就是CSS2.1规范并没有明确定义，浏览器自行发挥。否则，“包含块”由该祖先的padding box边界形成。
如果没有符合条件的祖先元素，则“包含块”是“初始包含块”。
和常规元素相比，absolute绝对定位元素的“包含块”有以下3个明显差异：
（1）内联元素也可以作为“包含块”所在的元素；
（2）“包含块”所在的元素不是父块级元素，而是最近的position不为static的祖先元素或根元素；
（3）边界是padding box而不是content box。
对于第一点很多人不太会用因为和直观理解不一致，如：

<span style="position:relative;">  
我是<big style="font-size:200%;">字号很大</big>的文字！ </span> 

很容易误认为包含块的上下边缘被其中“字号很大”的<big>元素给撑大了。实际上，此时元素的“包含块”范围与<big>元素毫无关系，就算其字号大小设置得再大，“包含块”范围依然是图虚线所示的那么大。原因很简单，内联元素的“包含块”是由“生成的”前后内联盒子决定的，与里面的内联盒子细节没有任何关系。
对于第二点，衍生出了一个问题，height:100%和height:inherit的区别。对于普通元素，两者确实没什么区别，但是对于绝对定位元素就不一样了。height:100%是第一个具有定位属性值的祖先元素的高度，而height:inherit则是单纯的父元素的高度继承，在某些场景下非常好用。
绝对定位元素的“包裹性”中的“宽度自适应性”其实也是相对于“包含块”来表现的
用个例子解释

.box { position: absolute; } 
<div class="box">文字内容</box> 

在通常场景下，.box元素宽度就是里面文字的宽度，不会换行；随着文字越来越多，如果文字足够多，.box元素宽度会越来越大，但是不会无限制大下去，因为超过一定限制是会自动换行的，而这个限制就是.box元素的“包含块”。“会自动换行”说的就是“包裹性”中的“宽度自适应性”。
如

.container {  
width: 200px;  
border: 1px solid;  
position: relative; 
} 
.box { position: absolute; } 

同时.box元素里面的文字内容非常多，此时，.box元素的“包含块”就是.container元素，因此，.box元素最终的宽度就是200px，也就是说，绝对定位元素默认的最大宽度就是“包含块”的宽度。.container高度塌陷是因为absolute破坏了正常的CSS流，此乃“破坏性”；宽度被relative限制在最大200px，此乃“包裹性”，因此，对于弹框这种绝对定位或固定定位的元素是没有必要设置max-width:100%的。
而“通常场景下”说的是，有可能我们的“包含块”（或者“包含块”剩余的空间）小到不足以放下“文字内容”这4个汉字。于是，一些“怪异”的现象就很好理解了，比方说纯CSS定位或JavaScript计算定位实现的提示效果一柱擎天的问题。

我们可以利用::before和::after伪元素实现我们想要的效果，一个实现三角，一个实现矩形区。为了不干扰布局，显然实现提示效果的两个伪元素会使用absolute绝对定位，为了定位准确，我们会给小图标元素设置position:relative。此时问题来了：由于提示信息的内容有长有短，我们不可能给提示元素设置一个特定的宽度，于是宽度表现走“包裹性”，也就是最大宽度不超过“包含块”的宽度，但是恰好此时“包含块”就是我们的小图标元素，并且宽度往往都不超过20像素，也就是我们的提示信息只能够在20像素宽的区域内显示，这就导致了最终的文字内容“一柱擎天”。

要修复这一问题其实很简单，只要改变默认的宽度显示类型就可以，添加white-space: nowrap，让宽度表现从“包裹性”变成“最大可用宽度”。
绝对定位元素“包裹性”的“包含块”限制不仅出现在宽度不足的时候，有时候就算“包含块”的宽度足够大，也依然会出现“一柱擎天”。眼见为实，还是提示信息效果，不过这次我们使用JavaScript实现，黑色提示条相关的HTML内容直接插入标签中，此时“包含块”的宽度就是浏览器窗体的宽度，按道理讲，是不会出现“一柱擎天”效果的，当我们的小图标在浏览器窗体靠近右侧边缘的时候，“一柱擎天”的悲剧同样发生了
虽然说黑色的提示元素的“包含块”宽度是整个浏览器窗体宽度，放几个文字绰绰有余，但是，由于我们的图标位于浏览器的右边缘，JavaScript定位的时候，就会设置一个很大的left属性值，导致“包含块”剩余的空间不足，也就是提示元素的“自适应宽度”不足，导致文字只能竖着显示，从而出现“一柱擎天”。
要修复此问题其实很简单，只要改变默认的宽度显示类型就可以，添加white-space: nowrap，让宽度表现从“包裹性”变成“最大可用宽度”，点击演示页面的删除图标可看到修复“一柱擎天”问题后的效果。当然，实际开发的时候，最好改变提示的方向，例如右边缘的时候，左侧提示。
最后讲第三点差异，也就是计算和定位是相对于祖先定位元素的padding box。为何绝对定位的定位要相对于padding box呢？这其实和overflow隐藏也是padding box边界类似，都是由使用场景决定的。
然而，实际项目场景千变万化，有时候，我们需要的效果并不是定位在列表的边缘，而是定位在内容的边缘，很多人不假思索就直接使用类似下面的代码实现

.list {  
padding: 1rem; 
} 
.tag {  
position: absolute;  
top: 1rem; 
right: 1rem; 
} 

效果虽然达成了，但是底子还是不够稳固，因为top、right属性值大小和padding属性值耦合在了一起。实际上，有小技巧可以使其不耦合，那就是间距不是使用padding撑开，而是使用透明的border撑开。

.list {  
border: 1rem solid transparent; 
} 
.tag { 
 position: absolute;  
 top: 0; 
 right: 0; 
 } 

此技巧唯一需要注意的就是尽量不要设置overflow:hidden。