溢出:隐藏/浮动属性

Question

我真的不明白为什么overflow:hidden会让浮动属性的效果被清除。

下面是我很难理解的资源。

<div class="float-frame">
  <div class="float-unit">A</div>
  <div class="float-unit">B</div>
  <div class="float-unit">C</div>
  <div class="float-unit">D</div>
</div>    <!--html5 sources--!>

.float-frame {
  background: #eee;
  border: 1px solid #ddd;
  padding: 10px;
  overflow:hidden;}

.float-unit {
  width: 50px;
  background: #333;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  padding: 15px 0;
  float: left;        /* css3 sources */
  }

如您所见，overflow:hidden属性的存在使视图与该属性不存在的情况完全不同。

我了解到overflow:hidden属性用于当内容溢出内容所属的框时使其不可见。

但是为什么会发生这种情况呢？我的意思是overflow:hidden属性使得浮动效果被清除..

我搜索了很多文章..但是我不能完全理解我自己。