为什么 img 设置 float 后不会覆盖

2015-07-08 10:11:49 +08:00
 ivito
<html>
<head>
<style type="text/css">
.pf
{
float:left;
}
</style>
</head>

<body>
<div>
<img src="eg_smile.gif" />
<img class="pf" src="eg_smile.gif" />
</div>
</body>
</html>

问题是为什么第二个img不会覆盖在第一个上边呢，而是两个在一行并排着。
3936 次点击
所在节点    CSS
6 条回复
morethansean
2015-07-08 10:43:32 +08:00
……谁告诉你 float 是覆盖的意思
jjplay
2015-07-08 10:52:35 +08:00
你对行，块，浮动元素 的概念还不太清晰，想覆盖 现在用相对 绝对定位吧，妥妥的，理解的问题慢慢来
ivito
2015-07-08 11:38:43 +08:00
@morethansean @jjplay 对行还不太了解，如果是块浮动的话就会覆盖了吧
br00k
2015-07-08 11:41:15 +08:00
因为img是inline-block
66beta
2015-07-08 11:41:59 +08:00
换 position
jankan
2015-07-08 11:50:21 +08:00
float后的元素是优先排列，类似inline-block，其他不float的元素会占满这行后换行

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/204133

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX