问题描述

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

目的：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的位置呢？

解决方案

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

解决方案二：

http://www.zhihu.com/question/30938856

解决方案三：

因为overflow:hidden 属性会隐藏超出的部分。不加时，.left div 是宽度100%，你加了时，.left div 宽度还是100%。不过由于右边有.right div，就会把遮住.right div的部分隐藏掉

解决方案四：

虽然隐藏了，不过那个位置还是被占据了