CSS 3周的div定位，兩次與浮動左右

Question

我的HTML代碼

<div style="border:1px solid red; height:140px;"> 
    <div style="width:100px; float:left; border:1px solid blue;"> 
     left 
    </div> 
    <div style="width:100px; float:right; border:1px solid blue; "> 
     right 
    </div> 
    <div style="border:5px solid green;"> 
     middle 
    </div> 
</div> 

爲什麼綠色邊框擴散到寬的100％，覆蓋左側和右側的div？如何解決這個問題，它涵蓋了以「中間」開始並在「右」之前結束的唯一塊？ 剛剛試過position:relative;但它沒有幫助。

代碼的例子是在這裏： jsFiddle

Answer 1

寫溢出：隱藏它。

<div style="border:5px solid green;overflow: hidden;"> 
      middle 
</div> 

入住這http://jsfiddle.net/A6qWE/1/

Answer 2

添加overflow:hidden包含中間的字的div風格

Answer 3

添加overflow:auto

http://jsfiddle.net/A6qWE/7/檢查這個演示

Answer 4

保證金添加到中間div margin: 0 100px

請參閱示例代碼@jsFiddle