请看一下这两个CSS float例子为什么表现不一样

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 4872 天前的主题，其中的信息可能已经有所发展或是发生改变。

在这篇文章中（http://www.osmn00.com/translation/232.html）
例子5和例子8的两种行为我表示不理解。
例子5中，绿图为什么会被粉图覆盖呢，如果说是粉图float了，而绿图按照正常的文档流排列的话，那么例子8中，footer如果不clear，它怎么不被content和navigation覆盖呢，因为content和navigation不也浮动了吗？

例子

绿图

粉图

4 条回复 • 1970-01-01 08:00:00 +08:00

Paranoid

2011-07-15 14:29:26 +08:00

例子5和例子8 其实是一样的。
例子5和例子8 区别在哪里？

例子5中的div全部都没有html而例子8中footer中是有html的！修改任何一方都可以～

jacob

2011-07-15 14:35:46 +08:00

@Paranoid
可能我没说明白，我是说div的显示原理，同样的有两个浮动的div，例子5中是两个带背景颜色的div，后面跟一个没浮动的div。例子8中也是两个浮动的后面跟一个没浮动的footer（不添加clear情况下）。结果却不一样，例子5中的greendiv被覆盖了，而例子8中的footerdiv却不被覆盖而是接在了第二个浮动的div后面？？？

Paranoid

2011-07-15 14:42:39 +08:00

即使是例子8中的footerdiv 也被覆盖的。

你看到不被覆盖只是因为 footerdiv 里面有内容 “footer”，而看起不被覆盖而已。用firebug 等工具你会看到footerdiv 的高度不单自由包含footer这一点高度。

jacob

2011-07-15 15:08:22 +08:00

@Paranoid
确实是一样也是被覆盖了，- -。但是对div中的内容来说，为什么像是有margin一样，内容被推到浮动元素后边去了