Question

I have two divs. The first one is width: 50% and the second on is width: 80%. When I set float: left to the first one, the text of the second one is placed on the right of the first one. That's ok, it is what I expect. See the code here:

<div style="float: left; width: 50%; background: orange">floated div</div> 
<div style="width: 80%; background: red">second div</div>

The doubt: if I set width: 30% to the second div. The div is placed below the first one, why? Check the snippet:

      <div style="float: left; width: 50%; background: orange">floated div</div> 
      <div style="width: 30%; background: red">second div</div>

Answer 1

float不会导致块元素并排显示或必然包装。使用float将导致在浮动元素环绕之后的文本和内联元素。因此，如果第二个div比第一个div宽，则第二个div中的 text 将包围第一个div。如果第二个div比第一个div更窄（或相同大小），它将不会换行，因为第二个div不仅仅是文本或内联元素。

https://developer.mozilla.org/en-US/docs/Web/CSS/float

浮点CSS属性指定一个元素应该从正常流中获取并放置在其容器的左侧或右侧，其中文本和内联元素将环绕它。

Answer 2

在第一个示例中，第一个div被浮动，因此从文档流中删除。然后第二个div占据了第一个div后面的空间，因为恰好有足够的空间容纳你在第二个div中给出的文本，它们整齐地保持在同一条线上。如果你在你的第二个div中添加了很多文本，你会发现它会溢出并开始在第一个div下包装。

在第二个示例中，第一个div再次浮动并从文档流中删除。然而，现在，因为你只有第二个div的宽度为30％，所以它所包含的文本没有足够的空间存在于同一行，因为它非常窄，因此文本被强制在第一个div的文本下面。如果从第二个div中删除文本，它将基本上消失在浮动的第一个div之下。

Answer 3

不确定您要对该代码段执行什么操作，但我只想在2个div之间添加一个明确的内容。

＆＃13;

<div style="float: left; width: 50%; background: orange">floated div</div>
<div style="clear: both;"></div>
<div style="width: 80%; background: red">second div</div>

＆＃13;

Two divs: the first one is floated and the position of the second one depends on its width, why?

3 个答案: