如下一段简单的HTML-CSS代码，为何加了overflow就能实现目的？

Question

目的：HTML中两块div，右侧固定宽度200px，左边的填满剩下的宽度
要求：左侧的div宽度是随可视区宽度变化而变化的，不能用calc()和CSS预处理语言

HTML:

<div class="right"></div>
<div class="left"></div>

CSS:

 .left {
    overflow: hidden;
    min-height: 50px;
    border: 2px dashed #f0f
}

.right {
    float: right;
    width: 250px;
    min-height: 50px;
    margin-left: 10px;
    border: 2px dashed #00f
}

如果div.left不加overflow:hidden，那么div.left就默认是与可视区等宽的，div.right浮在右上，但为何加了overflow:hidden，div.left反而能空出div.right的位置呢？

Answer 1

还有这种写法，真的是学习了