神奇的overflow屬性

我們知道，overflow屬性除了控制語義上的溢位樣式外，還有一個常用的功能是清除浮動。 但是今天我遇到了一個奇怪的問題，請看程式碼：

app-header.less

.banner {
  width   : 100%;
  display : block;
}

ticket-list.less

.container {
  width            : 94.67%;
  margin-top       : -28px;
  margin-right     : auto;
  margin-left      : auto;
  background-color : #ffffff;
  border-radius    : 5px;
  box-shadow       : 0px 2px 4px 1px #e9e9e9;
}

上面的css得到了下面的渲染結果：

問題來了，我期望機票列表重疊在圖片上，但是白色的背景不見了，可是文字卻能看到， 這說明並不是因為圖片把列表給覆蓋了，於是我試了一下給列表設定z-index，果然沒用！ 我感到很欣慰！於是我一條一條的刪除我的css，看到底是哪個屬性引起了這個問題，還是無果。 忽然我抱著試試的心態，給它加一個overflow吧，設定成什麼好呢，瀏覽器給我一個提示， 有個值叫做overlay，看起來好像有用，然而事實上並沒有什麼卵用！算了，放棄吧， 一生氣滑鼠滾了一下，overflow的值改成了scroll。咦！好了！

ticket-list.less

.container {
  width            : 94.67%;
  margin-top       : -28px;
  margin-right     : auto;
  margin-left      : auto;
  background-color : #ffffff;
  border-radius    : 5px;
  box-shadow       : 0px 2px 4px 1px #e9e9e9;
  overflow         : scroll;
}

就是這個樣子的：

背後的原因是什麼還不清楚，如果有人知道請聯絡我！^_^