浮动元素位于固定定位的容器内

Question

通常当您浮动元素并且容器没有高度时，容器没有高度。但是如果容器有一个固定的位置，它会在漂浮的div周围伸展。为什么是这样？

.container {
  width: 50%;
  margin: 0 auto;
  background-color: blue;
  position: fixed;
}

.box_1 {
  height: 4rem;
  background-color: red;
  width: 10%;
  float: right;
}

.box_2 {
  height: 5rem;
  width: 10%;
  float: left;
  background-color: yellow;
}

<div class="container">
  <div class="box_1">

  </div>

  <div class="box_2">

  </div>
</div>