左边浮动，右边自适应布局

Question

一直有个问题困恼着我，就是这个实现左边布局，右边自适应的方案，
他的实现原理是：左边div设置浮动，右边div设置宽度为100%；
疑惑的是，右边的div的100%不是相对于整个html而言的吗？这样为啥不会出现滚动条？
代码预览如下：
http://jsrun.net/iaXKp

谢谢大佬释疑

Answer 1

了解一下BFC，你就懂了

Answer 2

右边的宽度是100%，但是由于你的左边的div浮动，相当于和本身的层级发送了变化，右边的div会在左边的下面，但是文字会被挤过来。实际上div的宽度本就是100%，你可以设置左边div，display：none;你就可以看到右边宽度是多少

Answer 3

重叠在一起了，完全是视觉上导致的错觉。设定样式，将两个div上下错开一点点就看到了。或者设置透明度。

Answer 4

把左边的div设置为半透明试试

Answer 5

你在左边框加个 margin-top: 10px; 就知道了。