left設置為float：left，mianbody設為position：absolute，right設為float：right顯示有問題

如題目所示，這樣設置不知道為啥，left 和 mianbody 都正常，但是right字數很少或者寬度很小的時候會在一行，字數、寬多了就會自動另起一行為什么？（PS：并沒有多到放不下、基礎不好，代碼有低級錯誤的地方請包涵。。。）

<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>Document</title>
<style?type="text/css">
*{
margin:?0px;
padding:?0px;
}
#warp{
background:?#ff0;
width:?970px;
margin:20px?auto;
position:?relative;
overflow:?hidden;
}
#left{
width:?110px;
height:?200px;
background:?red;
float:left;
}
#middle{
width:?650px;
height:?250px;
background:?blue;
position:?absolute;
left:123px;
top:0;
}
#right{
width:?184px;
margin-left:786px;
height:?230px;
background:?green;
float:right;
overflow:hidden;
}
</style>
</head>

<body>
??<div?id="warp">
<div?id="left">left</div>
<div?id="middle">middle</div>
<div?id="right">right1111</div>
??</div>
</body>
</html>