Question

我遇到了浮动一个我不太了解的元素的问题。显示问题比解释更容易，所以我创建了两个示例来演示输出的不同取决于放置元素的顺序。

示例＃1

HTML：

<body>
    <div class="float-right">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate metus velit, at mattis orci consectetur sit amet. Etiam tellus risus, ornare at tellus sit amet, suscipit aliquet sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed congue odio non massa vehicula convallis. Nullam maximus diam eu lectus pellentesque, et imperdiet erat fringilla.</p>
    </div>
    <figure>
        <img src="http://imageserver.moviepilot.com/watch-teenage-mutant-ninja-turtles-season-2-episode-16-online-the-lonely-mutation-of-baxter-stockman-threatens-to-mutate-april-is-the-new-n.webp?width=640&height=479" title="TMNT!" alt="TMNT 90's logo" />
        <figcaption>TMNT logo from the 90's</figcaption>
    </figure>
</body>

CSS

div {
    width: 300px;
}
img {
    height: 200px;
    width: 200px;
}
.float-right {
    float: right;
}
figure {
    height: 200px;
    width: 200px;
    border: 1px solid black;
}

输出：http://jsfiddle.net/4yw8ga68/3/embedded/result/

这里包含段落的div是向右浮动的。此div后跟一个包含图像和标题的figure元素。在输出中，您可以看到div一直向右浮动，因此，图像位于页面的左上角。

示例＃2

HTML：

<body>
    <figure>
        <img src="http://imageserver.moviepilot.com/watch-teenage-mutant-ninja-turtles-season-2-episode-16-online-the-lonely-mutation-of-baxter-stockman-threatens-to-mutate-april-is-the-new-n.webp?width=640&height=479" title="TMNT!" alt="TMNT 90's logo" />
        <figcaption>TMNT logo from the 90's</figcaption>
    </figure>
    <div class="float-right">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate metus velit, at mattis orci consectetur sit amet. Etiam tellus risus, ornare at tellus sit amet, suscipit aliquet sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed congue odio non massa vehicula convallis. Nullam maximus diam eu lectus pellentesque, et imperdiet erat fringilla.</p>
    </div>
</body>

CSS

div {
    width: 300px;
}
img {
    height: 200px;
    width: 200px;
}
.float-right {
    float: right;
}
figure {
    height: 200px;
    width: 200px;
    border: 1px solid black;
}

输出：http://jsfiddle.net/4yw8ga68/5/embedded/result/

此代码与第一个代码相同，只有浮动的div放在图形和图像之后。在此示例中，div显示为浮动到右侧，但由于图像而下降。

我的问题是，为什么第二个例子中的输出不同？我希望输出与第一个例子相同，考虑到图像和图形只有200px宽，并且仍有足够的空间让浮动的div一直浮动到页面的右侧和顶部。

非常感谢任何帮助。谢谢！

Answer 1

这是因为当第一个元素浮动时，它会填充空格后的任何元素。

但是，如果只有第二个元素浮动，那么它对第一个元素没有任何影响，因为它不会在第二个元素之后出现。

如果要实现与第一个代码相同的效果但保留第二个HTML结构，则需要向<figure>元素添加float属性，如下所示：

figure {
    height: 200px;
    width: 200px;
    border: 1px solid black;
    float: left;
}

这是一个JSfiddle：http://jsfiddle.net/4yw8ga68/6/

浮动元素的排序

1 个答案: