为什么浮标在逃到下一行时会保持"phantom"空间？

Question

我正在玩弄CSS元素的属性并编写了以下代码：

body {
    font-family: "Helvetica";
}
.parent {
    background-color: yellow;
    overflow: auto;
    padding-bottom: 20px;
    display: inline-block;
}
.col {
    height: 200px;
    padding: 20px 10px;
    float:left;
    margin: 10px 10px;
    }
.red {
    background-color: red;
}
.green {
    background-color: #00ff00;
}
.blue {
    background-color: #0000ff;
    color: white;
}
p:hover {
    background-color: #ffff00;
}

为什么当我运行结果并将屏幕大小调整到蓝色浮点数清除到下一行的点时，父div 的黄色轮廓没有调整大小以适应宽度？

如果这令人困惑，我深表歉意。以下是我的意思的视觉示例：

https://www.dropbox.com/s/9r7mhizfqdbyflh/Screenshot%202014-12-24%2001.02.36.png?dl=0

为什么尽管它是内联块，但仍有黄色空间？是因为浮点数在那里保留了保留空间，即使它被清除到下一行？

JSFiddle：http://jsfiddle.net/ffxg9qq0/1/embedded/result/

谢谢！

Answer 1

空间

是由于孩子的float:left造成的

您需要编写@media查询，以便.parent调整

@media screen and (max-width: 400px){
    .col{
        float:none;
    }    
}

将下面的小提琴调整为max-width 400px

演示 - http://jsfiddle.net/ffxg9qq0/3/

body {
  font-family: "Helvetica";
}
.parent {
  background-color: yellow;
  overflow: auto;
  padding-bottom: 20px;
  display: inline-block;
}
.col {
  height: 200px;
  padding: 20px 10px;
  margin: 10px 10px;
  float: left;
}
.red {
  background-color: red;
}
.green {
  background-color: #00ff00;
}
.blue {
  background-color: #0000ff;
  color: white;
}
p:hover {
  background-color: #ffff00;
}
@media screen and (max-width: 400px) {
  .col {
    float: none;
  }
}

<div class='parent'>
  <div class='col green'>
    <p>I'm in a green float!</p>
  </div>
  <div class="col red">
    <p>I'm in a red float!</p>
  </div>
  <div class="col blue">
    <p>I'm in a blue float!</p>
  </div>
</div>