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

【问题标题】：ignoring text height using float left doesn't work but right does使用 float left 忽略文本高度不起作用，但 right 可以
【发布时间】：2015-11-25 14:05:59
【问题描述】：

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

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

根据我的经验，我给出了浮点值，所以 div 应该忽略跨度标签高度。当我使用 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;
}

【问题讨论】：

你能展示完整的css吗
@sebastianbrosch 这里是 jsfiddle jsfiddle.net/9kL3zoxe 你可以在那里看到完整的 css
使用 box-sizing:border-box;概念，它会解决你的问题

标签： css html

【解决方案1】：

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

JSFiddle

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

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

JSFiddle

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

【讨论】：

【解决方案2】：

您可以为类边距或文本框指定绝对位置。您所做的对您不起作用，因为浮动通常是相对定位的，并且与父元素发生冲突。 float:right 起作用的原因是它不需要定位。

【讨论】：