html - 为什么要清除div？

Question

我有两个带有 float:left 属性和一些宽度的 div。它们被包裹在一个具有 overflow: hidden 属性的容器中。

当我将浏览器的大小更改为在水平方向上变小时，当窗口的宽度太窄而无法并排显示两个 div 时，我希望出现一个水平滚动条。但实际情况是，第一个 div 下面的 div 正在清除。

我怎样才能让 div 在窗口太小时不会下降，而是始终与第一个 div 保持在同一行，并且会出现水平滚动条？

这是我的 html:

<div class="col-container">
  <div class="col col-1">
    Content 1
  </div>
  <div class="col col-2">
    Content 2
  </div>
  <div class="col col-3">
  </div>
</div>

这是我的 CSS:

.col-container{
  overflow: hidden;
}

.col {

    float: left;
}
.col-1{
    width: 30%;
    margin-right: 30px;
}

.col-2{
    background-color: blue;
 }

和here是这个 html 和 css 的 fiddle 。

Answer 1

为确保两列不清晰，您必须为其容器设置最小宽度:

.col-container{
    overflow: hidden;
    min-width: 150px;
}

这是带有上述更新的 jsfiddle:
https://jsfiddle.net/3s963o9o/2/

另一种选择是不使用float，而是将结构更改为flexbox。