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

This topic created in 5517 days ago, the information mentioned may be changed or developed.

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

例子

绿图

粉图

4 replies • 1970-01-01 08:00:00 +08:00

Paranoid

Jul 15, 2011

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

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

jacob

Jul 15, 2011

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

Paranoid

Jul 15, 2011

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

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

jacob

Jul 15, 2011

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