发现overflow:hidden的一种奇怪用法，不知应该怎么理解...希望各位大大解惑！

Question

   实现一个自适应布局，效果图和HTML代码如下：
   

<div class=”parent”>
   <div class=”side”>侧栏</div>
   <div class=”main”>主栏</div>
</div>

    要求两栏间距为10px。
    
看到一段代码，不是很懂，代码里运用了overflow:hidden实现此效果:
 css代码如下：

.parent{font-size:22px;font-family:"微软雅黑";color:#fff;text-align: center;line-height: 110px}
.side{float: left;width: 200px;margin-right: 10px;background-color: red;margin-top: 10px}
.main{background-color: blue;overflow: hidden;}

  本来div[class=main]中不设置overflow:hidden的话，如下图：

  设置了overflow:hidden后，如下图：
  

  问题：为何会出现上述情况？overflow:hidden在这里起的作用是什么？
我的想法： overflow:hidden如果理解为隐藏溢出内容的话，右侧主栏div[class=main]没有设置宽度，默认width为父元素width，宽度动态变化...应该不存在什么超出的情况啊...
如果overflow:hidden理解为清除浮动的话，，，我在网上看到的资料说overflow:hidden清除浮动应该用于父元素div[class=parent]中，清除里面浮动子元素的浮动...这里overflow：hidden在这里让我有点无法理解了...
希望各位大大能够解惑，感激不尽！

Answer 1

http://segmentfault.com/a/1190000003068557#articleHeader6

Answer 2

因为
overflow:hidden
创建了一个bfc