Html 浮动：：与块级同级交互后

我有一个互动，我不太明白。我正在构建一个进度条（说真的，我们可以实现整个过程吗？），它显示基于数据-*属性的信息，所以我使用：before和：after来显示标签

我把它弄得乱七八糟：

HTML:

不幸的是，我遇到了这种情况：

我希望[2]在主酒吧里面，而不是在它下面

我在Windows上的IE9和Chrome 27中看到了相同的行为，所以我很确定这是我误解了这些东西的工作方式，而不是渲染引擎中的错误

---

所以。。。怎么了？有什么想法吗？我擅长黑客，这只是目前的一个原型。

我从不在伪元素上使用浮点数。我会把它们放在绝对位置。大概是这样的：

.wrap {
    width:500px;
    height:2em;
    border:1px solid black;
    position: relative;
}

.wrap:before {
    content:"1";
    position: absolute;
    left: 0;
    top: 0;
    border:1px solid black;
}

.wrap:after {
    content:"2";
    position: absolute;
    right: 0;
    top: 0;
    border:1px solid black;
}

---

我在你的小提琴上试过了，看起来不错

.wrap:：before

伪元素显示在

.internal

前面作为前一个同级，而

.wrap:：after

后面作为后一个同级。由于您不是浮动的

.internal

，

.wrap:：after

在浮动到右侧之前必须在其下方移动。

.wrap:：before

能够重叠

.internal

的原因是因为您正在浮动伪元素，所以

.internal

将其自身定位为伪元素不存在。我的印象是，内联块元素在布局时忽略块元素；是不是比这更微妙？我知道我曾经有过这样的例子，我在一个块之后放置了一个内联块，它悬停在该块上；在您的例子中，您将浮动应用于伪元素。浮动长方体时，它总是强制显示为块。即使对于通常为内联线（而非内联块）的伪元素框，以及尝试强制显示：内联块，也是如此。浮动操作与内联块完全不同。啊，我明白了。我的工作假设是一个浮点将一个元素转换成一个内联块。

.wrap {
    width:500px;
    height:2em;
    border:1px solid black;
}

.wrap:before {
    content:"1";
    float:left;
    border:1px solid black;
}

.wrap:after {
    content:"2";
    float:right;
    border:1px solid black;
}

.inner {
    width:30%;
    height:100%;
    background-color:#DDD;
    border:1px solid #888;
}

.wrap {
    width:500px;
    height:2em;
    border:1px solid black;
    position: relative;
}

.wrap:before {
    content:"1";
    position: absolute;
    left: 0;
    top: 0;
    border:1px solid black;
}

.wrap:after {
    content:"2";
    position: absolute;
    right: 0;
    top: 0;
    border:1px solid black;
}