Question

据我所知，float从当前流程中可以选择左侧或右侧的元素。我明白，浮动元素后面的元素就像img之后的p一样包裹起来。首先做所有以下元素包裹浮动，直到没有更多的空间？（所以，如果我有p只占浮动图片的一半，a和h3然后另一个p将继续包裹，直到没有更多的空间？或只是第一个元素？）我也明白，明确会阻止清晰元素和任何后续元素的包装，对吧？任何元素内联或块将包装浮动？那为什么不会有另一个div？

我不明白为什么当浮动一个div / img p之后它会包装它如果你有2个div，当第一个浮动时让我们说左边，div后面将是一个新行。如果生病漂浮在左边，我也知道它将堆叠在前浮子旁边，但为什么它会与第一个浮在同一条线上，如果我将它漂浮到右边？我认为浮动正在使用正常流量，而在正常流量中，第一个浮动之后的div将在其下面。所以为什么 1浮动左div和另一个浮动后看起来像：

------
------

然而，如果生病了第二个向右，那将是：

------                     ----------

而不是：

-------
                                                          -------------

浮动是否正在为流程做点什么？

我很抱歉，我没有说清楚。我不想做任何事情，只需要了解花车的行为。

我想说：

<div style="float:left"></div>
<div></div>

然后第一个将浮动为左，但由于某种原因，第二个div（假设我确实给第一个宽度小于100％）将在一个新的行。为什么一个新的线而不是像第一个旁边的p-wrap？我们不给p浮动但它包裹floate3d元素。

第二

<div style="float:left"></div>
<div style="float:right"></div>

两个div（再次给出适当的宽度）将在同一行。我想知道为什么第一个代码会让它们显示在不同的行上而第二个代码却在同一行上显示。不应该浮动箱子从当前的流量移动到侧面？不是第二个div（第二个代码）的当前流量将是它在第一个代码上的位置（下面一行）那么为什么使用2个相反的浮点数会使div显示在同一行： ------------ ----------------- 而不是浮动的那个是现在的位置，只是第一个div下面的一行？

Answer 1

我读了3遍并且放弃了......

你是想把一个元素左移还是另一个元素？

只需给它们一个宽度：

<div style="float: left; width: 400px;">1</div>
<div style="float: right; width: 400px;">2</div>

P.S。一张图片说千言万语。

[edit]如果你想把它放在一个容器里面：

<div id="container" style="position: absolute; width: 800px; margin: 0 auto; overflow: hidden;">
    <div style="float: left; width: 400px;">1</div>
    <div style="float: right; width: 400px;">2</div>
</div>

Answer 2

听起来您需要按照浮动顺序订购HTML标记。

应该首先使用正确的花车。

Answer 3

看起来您的浮动元素的父元素未设置为100％宽度。确保你正在使用position：relative并正确设置宽度。

另外，请出示您的代码。解密你的文字非常困难。

Answer 4

<div style="float: left;">first line</div>
<div style="float: right;">second line</div>

CSS中浮动元素的基础知识

4 个答案: