奇怪的浮动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的结果有点让我出乎意料。

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

11 thoughts on “奇怪的浮动Float

    1. jucelin 文章作者

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

      回复
  1. 西门

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

    回复
    1. jucelin 文章作者

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

      回复
        1. jucelin 文章作者

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

          回复
          1. jucelin 文章作者

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

  2. 西门

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

    回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注