求教为什么box1跟box2有重叠？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

*{margin:0;padding:0;}

#wrap{width:960px;;margin:0 auto;}

.mainbody{width:100%;height:400px;background:#FC0;overflow:hidden;}

.box1{width:130px;height:50px;background:red;float:left;}

.box2{width:330px; height:150px;background:blue;}

.box3{height:50px;background:purple; }

</style>

</head>

<body>

</div>

</body>

</html>

qq_红豆馅儿_0

2015-09-10

源自：网页布局基础 3-3

关注问题我要回答

459

操作

收起

1 回答

qq_红豆馅儿_0 提问者
2015-09-10

自己从网上搜了一下：浮动会将元素从文档流中删除，他的空间会被其它元素补上；浮动这个机制的时候，就是为了实现文字环绕在图片周围的效果。所以浮动的时候，文字会环绕在浮动元素周围。

脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

http://www.zhihu.com/question/24529373/answer/29135021