Question

我有点困惑，并希望得到一些帮助。

我正在查看关于MDN浮动的文章，我复制并粘贴他们的示例并稍微更改它，它出现了我期望它 - 浮动元素位于下一个元素的左侧

然而，我在jsfiddle中创建了第二个测试，这次浮动元素位于下一个元素的TOP上。

（请参阅摘录）。

向左浮动：

h4{
    float: left;
    margin: 0;
}

<h4>HELLO!</h4>
<pre>
This is row 1 of some text.
</pre>
<pre>
This is row 2 of some text.
</pre>
<pre>
This is row 3 of some text.
</pre>
<pre>
This is row 4 of some text.
</pre>

浮在上面：

<div style="float: left; height: 100px; width: 100px; background: blue"></div>
<div style="height: 200px; width: 200px; background: orange"></div>

有人可以向我解释到底发生了什么事吗？

Answer 1

如果您在第一个示例中为pre元素添加彩色背景，那么它应该变得清晰： float会影响文本换行，但不会从根本上改变页面的流量或更改元素的大小。

如果您在示例2中的橙色框中添加了文本，则应该看到它已被包装。

修改：这是一个演示：https://jsfiddle.net/tj1appLf/

CSS浮动导致元素重叠

1 个答案: