Css Chrome浏览器-绝对定位和浮动问题

这是一个整天困扰着我的问题。我不太清楚如何描述它，除了我遇到了一个问题，一个

div

漂浮在一个浮动的容器上，这似乎只是Chrome中的一个问题

看看这个：。文本旁边应该有一条条纹，但在Chrome中，它看起来像是一条划过的条纹

HTML:

---

我已经想出了一个解决办法，但我只是想知道是否有人能向我解释这里出了什么问题以及为什么。如果没有，我将继续我的快乐之路……

引用OP:

我遇到了一个浮动在浮动容器上的

div

问题

通常情况下，当你看到一些东西时，页面上的其他内容应该围绕着它流动

---

报价操作：

文本旁边应该有一条条纹，但在Chrome中，它看起来像 突破

我不确定你所说的“穿透”是什么意思，但是你已经用class

.stripe

将元素定义为100%宽，这意味着它将是其父元素宽度的100%。在本例中，

.stripe

的父元素是类为

.wrapper

的元素。由于

.wrapper

类没有定义的宽度，默认情况下，它的宽度将是其父窗口的100%。因此，正如您所定义的，条带的宽度将是窗口的100%

---

报价操作：

我只是想知道是否有人能向我解释这里出了什么问题以及为什么

关于你的代码

.stripe {
     background-color: black;
     width: 100%;
     display: inline;
     position: absolute;
     height: 1em;
}​

是内容流中元素的属性

但是，会将元素从内容流中移除

这样做毫无意义。换句话说，它不能同时处于流中和流外

---

还有一个。

谢谢你的解释（还有编辑，因为我很累，而且问题解释得很草率）。我将来必须记住这些联系。此外，我还需要重新考虑我的解决方案。@Relic，OP要求的是解释，而不是解决方案。我给了他一个详细的解释，你没有。因为你认为我否决了你的，你就否决了我的。优雅的行为。关于SO的一些最好的答案已经全部写出来了。。。它们不仅仅是一个带有一个包含“与……有关”字样的句子的JSFIDLE链接。事实上，正如我在上面清楚解释的那样，他的问题与你声称的无关。

.wrapper::after {
     content: " ";
     display: block;
}
.content {
     float: left;
}
.stripe {
     background-color: black;
     width: 100%;
     display: inline;
     position: absolute;
     height: 1em;
}​

.stripe {
     background-color: black;
     width: 100%;
     display: inline;
     position: absolute;
     height: 1em;
}​