我遇到了一个 float 元素的问题，我不太明白。显示问题比解释问题容易，因此我创建了两个示例来演示输出如何根据您放置 float 元素的顺序而有所不同。
示例 #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 后面是一个包含图像和标题的图形元素。在输出中，您可以看到 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/
这段代码和第一段一样，只是 float 的div放在了figure和image之后。在此示例中，div 显示为向右浮动，但由于图像的原因而向下倾斜。
我的问题是，为什么第二个例子的输出不同？我希望输出与第一个示例相同，考虑到图像和图形只有 200 像素宽，并且 float div 仍然有足够的空间一直 float 到页面的右侧和顶部。
如有任何帮助，我们将不胜感激。谢谢!
最佳答案
这是因为当第一个元素 float 时，它后面的任何元素都会填充空间。
但是，如果只有第二个元素是 float 的，那么它对第一个元素没有任何影响，因为它不在第二个元素之后。
如果你想达到与第一个代码相同的效果但保留你的第二个 HTML 结构，那么你需要向 <figure> 添加一个 float 属性。元素，因此:
figure {
height: 200px;
width: 200px;
border: 1px solid black;
float: left;
}
这是一个 JSfiddle:http://jsfiddle.net/4yw8ga68/6/
关于html - float 元素的排序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26748132/