使用float left忽略文本高度不起作用，但是右边没有

Question

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

但是当我向div添加一个文本时，垂直对齐会发生变化，这不是我想要的。但是正确地将文本放置在左侧，如我所愿。

根据我的经验，我给了浮动值，所以div应该忽略span标签height.it在我使用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＆amp; left位置，元素仍然相对定位，从而产生踩踏效果。 我已将其更改为absolute并且工作正常：

JSFiddle

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

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

JSFiddle

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

Answer 2

您可以为类margina或textbox提供绝对位置。你做了什么不适合你，因为浮动通常是相对的，它与父元素冲突。 float：right工作的原因是因为它不需要定位。