加了绝对定位会把行级元素变成块级元素么

Question

给span加绝对定位

css

.shareBox span {
    width: 20px;
    height: 60px;
    background-color: #dedede;
    line-height: 20px;
    position: absolute;
    right: -20px;
    top: 70px;
}

效果

正常情况这些宽高应该是不生效的吧

Answer 1

这个现象被称为块级格式化上下文，即BFC(Block formatting context)。

常见的产生BFC的方式有：浮动元素（元素的 float 不是 none）、绝对定位元素（ position 为 absolute 或 fixed）、行内块元素（display 为 inline-block）、overflow 计算值不为 visible 的块元素等。

更多可见MDN-块格式化上下文。

Answer 2

1. inline width不生效是因为width适用范围不包括non-replaced inline elements；
2. absolute会生成块级格式化上下文，你去看一下它的display已经变成block了