奇怪的浮动Float

在百度知道搜资料的时候看到一个网友问了关于CSS浮动的问题,问题地址在这里,直接看代码:

<body>
<div style="background:red; height:100px; width:200px; float:left;">111111111111111</div>
<div style="background:grey; height:100px; width:200px;">222222222222222</div>
</body>

看了上面代码很简单,相信从理论上你也应该看出会是什么样的一个显示方式。但问题就在于你没想到的地方。看下面的效果:

111111111111111
222222222222222

再试试不同的浏览器,我使用的IE和Chrome,可以明显的看出两者的不同之处。为了更明显的看出区别在哪,你可以本地新建一个文档,贴入下面的代码:

<body>
<div style="background:red; height:100px; width:200px; float:right;">111111111111111</div>
<div style="background:grey; height:100px; width:200px;">222222222222222</div>
</body>

然后收到缩小浏览器窗口的宽度,看看两者是怎么个float方式。

之前也没遇见过,当然也可以为第二个div加个float就能解决,但问题在于我没想清楚这样的不兼容到底怎么去解释。不过从理论上IE的渲染结果比较符合我的理解,Chrome的结果有点让我出乎意料。

请问各位高手,如此问题你如何解释?

本文固定链接: https://jucelin.com/what-is-wrong-with-float.html | Jucelin

该日志由 jucelin 于2012年04月15日发表在 前端设计 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 奇怪的浮动Float | Jucelin
关键字: , , , ,

奇怪的浮动Float:目前有11 条留言

  1. 5楼
    牧风:

    给第二个加个margin-left:200px

    2012-07-04 22:47
    • jucelin:

      解决办法有很多,但解释不清楚。可能知识太少的原因,呵呵

      2012-07-05 17:35
  2. 4楼
    君说:

    浮动。唉。。很恼火,对这个。

    2012-05-17 18:50
  3. 地板
    西门:

    晕,代码发不上来。
    就是第一个DEMO,把2那个div宽度增加,把测试的1,2数字都换成中文。

    2012-04-28 11:46
    • jucelin:

      换成中文的话,似乎也是一样的,用的Chrome。

      2012-04-28 13:28
      • 把第二个DIV的宽度换成500,你就看得懂了,所有浏览器都一样。

        2012-04-28 13:40
        • jucelin:

          我纠结了,看这个图http://t0.qpic.cn/mblogpic/433e395acb95889ca76e/2000

          2012-04-28 14:43
          • http://jsfiddle.net/4WfSV/
            你截图应该是IE7吧。我这边IE8和Chrome效果一样。
            使用的时候,不建议第二个div加宽度。

            2012-04-28 15:10
            • jucelin:

              哈哈,真的是IE8,Win7 Sp1。我也去jsfiddle测试了下,IE8和Chrome确实是一样的效果,可保存到本地的时候仍然出现上面的问题,无论是否开启兼容模式。这个问题的解决方法倒是知道,就是有点摸不着头脑解释不清楚。先谢谢你西门大哥。

              2012-04-28 15:55
  4. 板凳
    西门:

    擦,你第一个demo写得有问题,害我也被误导了。。。
    文字文字
    也是的
    看这个,自己理解。

    2012-04-28 11:37
  5. 沙发
    刘印博客:

    :evil: 沙发,可惜我看不懂!!

    2012-04-24 22:47

发表评论

您必须 [ 登录 ] 才能发表留言!

更多