返回信息流为何宝马那张图不会跟随<div>向上被沃尔沃图覆盖住？jeep那张图为何又会遮盖宝马图？源代码如下：
body,div{margin:0;padding:0;}
div{
width:200px;
height:150px;
border:1px solid black;
}
.one{float:left;}
.two{width:220px;height:220px;}
.three{background-color:blue;}
</style>
</head>
<body>
<div class="one"><img src="car1.jpg" /></div>
<div class="two"><img src="car2.jpg" /></div>
<div class="three"><img src="car3.jpg" /></div>
http://g.hiphotos.baidu.com/zhidao/pic/item/6c224f4a20a44623d763cc059922720e0cf3d728.jpg
</body>
这是一条镜像帖。来源：北邮人论坛 / www-technology / #19458同步于 2013/4/9
该镜像源已超过 30 天没有更新，可能在源站已被删除。
WWWTechnology机器人发帖
一个css浮动的弱智问题，请高手指点~~
ruoziyou2011
2013/4/9镜像同步2 回复
订阅后，新回复会通过你的通知中心匿名送达。
2 条回复
首先,你的图裂掉了... 不过还是通过地址看到了图片
然后我的理解是这样的:
首先的一个原则就是在position等属性没有设置的前提下,所有元素如果存在覆盖的情况,一定是在html里后出现的压住之前出现的
然后就是,float了的one肯定会移动到左上角,这个应该没有疑问吧?
但是呢,这样他就把div2的大部分地方给占了. float的原则就是之后的元素都按照原有的排列往右排,遇到超出自己父级宽度了就往下挪动,(直到可以向左排下为止(括号内的内容是在网页左边的元素高度不一的情况,你这个网页没有涉及到,所以这两层括号你可以直接忽略掉~))
还有一点就是float了以后就脱离的原有的文档结构(这个术语不确定是这么说),反正就是后边的元素(第二个div和第三个div)就开始从页面左上角开始排了
但是呢,因为坑爹的div1占用了左上角200*150的位置,所以第二个div里的图片就放不下,他就根据float的原则往右排,但是div2宽度减去div1的宽度的位置(即右边那个小条)又放不下图片2,所以图片2就只好变到了第三排,也就有一部分不得已跑到div外边了...
最后因为div2和div3都是默认的定位属性,所以div3后出现,自然挡住div2多出来的部分
在最初看到这段代码的时候,我觉得结果应该是float了的div1占用了div2的位置,所以div2整体移动到了div1的右边,然后里边图片还是正常的. 但是实验发现不是这样.
我就只能理解为,float占用的位置,只是内部元素,不包括div了. (渣水平...个人理解,不保证正确,但是上边的基本原则是参考以前看w3c理解的.)
改正一下... "所以图片2就只好变到了第三排,也就有一部分不得已跑到div外边了... " 写这句话的时候不知道脑子怎么想的,出来了"第三排"这么神奇的词.... 我是想说下一排
还有就是,因为div是外层的,他在排列的时候不会考虑里边的img是不是因为意外超出大小了. 所以div3的位置是紧贴着div2,而不会自动走到第二张图片以下