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

Question

我想使用HTML和CSS制作一个盒模型。因此，我创建了嵌套的div，并使用top left来正确定位。它有效。这是jsfiddle的预览。

但是当我向 div 中添加文本时，垂直对齐发生了变化，这不是我想要的。然而，文本在左侧正确地定位，正如我所希望的。

根据我的经验，我给出了浮动值，因此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>

用于 span 文本的 CSS

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

- Madhawa Priyashantha

---

你能否展示整个 CSS？ - Sebastian Brosch

@sebastianbrosch 这里是 jsfiddle https://jsfiddle.net/9kL3zoxe/，你可以在那里看到完整的 CSS。 - Madhawa Priyashantha

使用box-sizing: border-box;的概念，它将解决您的问题。 - Arun Kumar M

Answer 1

这是因为你的 .margina 是 position:relative;，尽管你指定了 top 和 left 位置，但元素仍然是相对定位的，这会产生跳动效果。我已将其改为 absolute ，现在正常工作了：

JSFiddle

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

为了完整起见，这是浏览器在对相对

进行top和left定位之前实际呈现页面的方式。我已经添加了overflow:hidden以进行演示：

JSFiddle

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

- Darren Gourley

Answer 2

你可以将类别 margina 或 textbox 的位置设为绝对定位。你之前的方法不起作用是因为浮动元素通常是相对定位，与父元素发生冲突。右浮动有效的原因是它不需要定位。

- Zuse