为什么在具有居中元素的同一容器中,元素需要在左前方浮动？

Question

我遇到了一个问题,右浮动元素与左浮动元素和居中元素保持相同的水平对齐.右浮动元素向右浮动,但坐在水平线下方,其他元素处于开启状态.

当浮动元素(例如一个左,一个居中和一个右)在同一个div中时,右元素需要在左元素之前堆叠.

例:

<div id=container>
    <div id="float-right"></div>
    <div id="margin-auto"></div>
    <div id="float-left"></div>
</div>

如果我只有两个元素,一个左边和一个右边,它们水平放置如下.

参见示例:jsfiddle

当我添加一个中心元素时,右元素向下移动.

参见示例:jsfiddle

这里发生了什么？

Answer 1

我将在这里为您提供一个简单的例子,让我们假设您没有分配中间div任何一个,width所以看看它实际上会做什么

演示

<div style="width:100%">
   <div style="width:20px;height:20px;background-color:red;float:left;border: 3px solid #000;"></div>
   <div style="height:20px;background-color:red;margin:0 auto auto;border: 3px solid #000;"></div>   
   <div style="width:20px;height:20px;background-color:red;float:right;border: 3px solid #000;"></div>
</div>

为什么会这样？

div是一个block-level元素,它占据了页面上的整个水平空间,如果你知道,当你float任何一个元素left或right它不再需要100%时它将只占用使用宽度或它所拥有的内容分配的空间,所以在这种情况下,left floated div将占用20px宽度而不使用其他空间.现在你有另一个div没有浮动但它将占用剩余的可用水平空间,使你的right floated div元素向下推.

那么该怎么做才能解决这个问题呢？

您需要左侧的float所有内容div,或者如果您middle div float向左或向右移动它可能就足够了.现在我知道你想要2,1 div左右浮动到右边,但这不是正确的方法,如果你愿意,你可以将元素包装在容器内div,或者你可以使用的是position: absolute;设置正确的元素.

为了向您展示块级元素的工作原理,我将在此分享您的另一个示例..

假设你有一个div嵌套在p标签内(这是无效的,所以请不要在现实世界中使用它,这只是为了演示目的),并给div元素一些宽度,看看它如何呈现你的文本.

<p>Hello World, I don't want the <div>text to</div> break</p>

div {
    width: 40px;
    background: #f00;
}

演示2

虽然你提供了width块级元素,但它仍然会破坏段落.

来自w3c

默认情况下,块级元素的格式与内联元素的格式不同.通常,块级元素从新行开始,而内联元素则不是.