为什么我的浮动元素没有正确对齐？

CSS 浮动行为的期望与现实

在 CSS 中，浮动属性通常用于水平对齐元素。但是，将其与其他元素一起使用时可能会出现意外行为。

问题

以下示例说明了一个常见的误解：

<code class="html"><div class="inline">
    first line<br>
    second line<br>
    third line<br>
</div>

<div class="yellow">floated div</div></code>

<code class="css">.inline {
    float:left;
}

.yellow {
    background-color:yellow;
}</code>

在此示例中，您可能希望第二个 div（具有黄色背景）与第一个 div 的右侧对齐。然而，如现场示例所示，它仍然占据其容器的整个宽度。

理解行为

这种行为实际上是浮动定位的预期结果。当元素浮动时，后续内容会从该元素的右侧向下流动。但是，包含块的宽度（由以下元素设置）仍然保留。

根据 CSS 规范，块级元素（例如 div 和 p）未定位忽略浮动。另一方面，线框沿着浮动的一侧流动，但它们的宽度缩短了。

解决方案

要达到预期的结果，其中第二个 div正确对齐后，您可以添加一个溢出属性，其值对第二个 div 不可见。这可以防止它与浮动元素重叠，如 CSS level 2.1 规范中所指定的。

示例

<code class="css">.yellow {
    overflow: hidden;
}</code>

添加此内容后，第二个 div 将不再延伸到浮动元素之外，创建所需的对齐方式。

重叠的目的

重叠在后续内容足够长以继续超出浮动元素的情况下非常有用。如果默认限制重叠，则内容将不会在浮动元素下继续，从而产生意想不到的结果。

以上是为什么我的浮动元素没有正确对齐？的详细内容。更多信息请关注PHP中文网其他相关文章！