返回信息流<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="background: red;width: 100px;height: 100px;float: left;"></div>
<div style="background: blue;width: 100px;height: 100px;margin: 100px;"></div>
</body>
</html>
为什么是图一的效果，不是图二，为什么红块向下移动了
这是一条镜像帖。来源：北邮人论坛 / www-technology / #37601同步于 2016/7/9
该镜像源已超过 30 天没有更新，可能在源站已被删除。
WWWTechnology机器人发帖
[问题]浮动的问题
qqpp3939
2016/7/9镜像同步4 回复
订阅后，新回复会通过你的通知中心匿名送达。
4 条回复
如果把红色div注释掉 效果如下：
整个body都是有个margin 100px了 是上边距叠加的问题
然后加上红色div 它float left脱离了文档流但还是在body里面 所以就是这个效果了吧
【 在 qqpp3939 的大作中提到: 】
: <!DOCTYPE html>
: <html>
: <head>
: ...................
上下边距叠加，如果父元素没有border和padding时，它的第一个子box的上边缘会和它重叠，且子元素的margin也参与到和父元素上一个元素margin叠加的计算。添加border或padding或者父元素在其内部创建新的BFC时即会取消叠加。所以body整个也下移了100px，float就跟着下移了