求教為什么box1跟box2有重疊？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
*{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 id="wrap">
<div class="mainbody">
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>?
<div class="box3">盒子3</div>?
</div>
</div>
</body>
</html>
2015-09-10
自己從網上搜了一下：浮動會將元素從文檔流中刪除，他的空間會被其它元素補上；浮動這個機制的時候，就是為了實現文字環繞在圖片周圍的效果。所以浮動的時候，文字會環繞在浮動元素周圍。
脫離文檔流，也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位。需要注意的是，使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內的文本依然會為這個元素讓出位置，環繞在周圍。而對于使用absolute positioning脫離文檔流的元素，其他盒子與其他盒子內的文本都會無視它。
http://www.zhihu.com/question/24529373/answer/29135021