css 真是搞人啊 请问这里的文本为何能知道那个已经不在正常流里的元素?

2019-08-13 20:24:54 +08:00
 Newyorkcity
https://codepen.io/AdmaEmail/pen/XWrXRrx

我认为 div2 应该直接被 div1 遮住。。
我认为这样是符合逻辑的:
div1 因为 float:left 所以从正常流中消失,浮在了原本位置,于是 div2 在正常文本流中放在了原本 div1 的位置
div1 和 div2 两个文本都很自然得放在块的左上角所以 div2 就被盖住了。。

然而结果是 div2 不知为何知道了那个地方有 div1 在,纠正了文本的位置。。请问这一机制是怎样的?谢谢
922 次点击
所在节点    问与答
2 条回复
napsterwu
2019-08-13 20:32:10 +08:00
要加一个 position,具体原因可以 stackoverflow
meepo3927
2019-08-14 10:54:27 +08:00
float 机制还蛮复杂的,你的这种情况可以简单理解为:文字环绕机制。

div2 虽然被 div1 挡住了,但是 div1 和 div2 内部内容的排布还是有关联的。

如果想完全被遮住:给 div1 加 position: absolute,去掉 float:left

如果想清除浮动:给 div2 加 clear: both

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

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

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

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

© 2021 V2EX