css - 使用 float left 忽略文本高度不起作用，但 right 可以

Question

我想使用 html 和 css 制作一个盒子模型。所以我制作了一个嵌套的 div 并使用左上角来正确定位。它有效。这是 jsfiddle预览 .

但是当我将文本添加到 div 时，垂直对齐方式发生了变化，这不是我想要的。但是文本按照我的意愿正确定位在左侧。

根据我的经验，我给了 float 值，所以 div 应该忽略 span 标签高度。当我使用 float:right 但不是 float:left 时它有效。如你所见当我使用右侧时，文本正确定位在右侧，但为什么不在左侧？

我想在左侧对齐文本。为什么会这样？以及如何在不影响相关 div 的情况下将文本定位在左侧

html代码

  <div class="squ">
    <div id="sone" class="margina">
    <span class="boxtext">margin</span>
        <div id="stwo" class="margina">
           <span class="boxtext">border</span>
            <div id="sthree" class="margina">
              <span class="boxtext">padding</span>
                <div id="sfour" class="margina">
                   <span class="boxtext">elem</span>
                </div>
            </div>
        </div>
    </div>

跨度文本的CSS

.boxtext{
    display:inline;
    float:left;
    color:#FFF;
}

Answer 1

发生这种情况是因为您的 .margina 是 position:relative; 尽管您指定的是 top 和 left 位置，元素仍然是相对定位的，这会产生步进效果。我已将其更改为 absolute 并且工作正常:

JSFiddle

.margina{
    position:absolute;
    top:20px;
    left:30px;
}

为了完整起见，这是浏览器在相对 .margina 上执行 top 和 left 定位之前实际呈现页面的方式div。我向它们添加了 overflow:hidden 来演示:

JSFiddle

.margina{
    overflow:hidden;
    position:relative;
    top:20px;
    left:30px;
}