V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
jacob
V2EX  ›  问与答

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

  •  
  •   jacob · 2011-07-15 14:13:09 +08:00 · 4201 次点击
    这是一个创建于 4862 天前的主题,其中的信息可能已经有所发展或是发生改变。
    在这篇文章中(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
        1
    Paranoid  
       2011-07-15 14:29:26 +08:00
    例子5和例子8 其实是一样的。
    例子5和例子8 区别在哪里?

    例子5中的div全部都没有html而例子8中footer中是有html的! 修改任何一方都可以~
    jacob
        2
    jacob  
    OP
       2011-07-15 14:35:46 +08:00
    @Paranoid
    可能我没说明白,我是说div的显示原理,同样的有两个浮动的div,例子5中是两个带背景颜色的div,后面跟一个没浮动的div。例子8中也是两个浮动的后面跟一个没浮动的footer(不添加clear情况下)。结果却不一样,例子5中的greendiv被覆盖了,而例子8中的footerdiv却不被覆盖而是接在了第二个浮动的div后面???
    Paranoid
        3
    Paranoid  
       2011-07-15 14:42:39 +08:00
    即使是例子8中的footerdiv 也被覆盖的。

    你看到不被覆盖只是因为 footerdiv 里面有内容 “footer”,而看起不被覆盖而已。 用firebug 等工具你会看到footerdiv 的高度不单自由包含footer这一点高度。
    jacob
        4
    jacob  
    OP
       2011-07-15 15:08:22 +08:00
    @Paranoid
    确实是一样也是被覆盖了,- -。但是对div中的内容来说,为什么像是有margin一样,内容被推到浮动元素后边去了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5680 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 03:28 · PVG 11:28 · LAX 19:28 · JFK 22:28
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.