实现一个自适应布局，效果图和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在这里让我有点无法理解了...
希望各位大大能够解惑，感激不尽！
http://.com/a/1190000003068557#articleHeader6
因为
overflow:hidden
创建了一个bfc