Why do floats keep a “phantom” space when they escape to the next line?

Question

I\'m playing around with properties of CSS elements and wrote this code:

body {
    font-family: \"Helvetica\";
}
.parent {
    background-color: yellow;
           


        

Answer 1

the space was cause due to float:left of the children

you will need to write @media query so that the .parent adjusts

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

resize the below fiddle to max-width 400px

demo - 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>