<div class="container note">
  <p>
    The container of the floated <code>figure</code>s does not have its floats cleared. It has a white background color but will not show because its height is collapsed and we can only see the padding. <strong>Try clearing the floats, and see how that will expand its height to contain the images.</
  </p>
</div>
<div class="container">
  <figure>
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/float/smiley.jpg" alt="image of a smiley face">
    <figcaption>
      Keep smiling!
    </figcaption>
  </figure>
  <figure>
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/float/smiley.jpg" alt="image of a smiley face">
    <figcaption>
      Keep smiling!
    </figcaption>
  </figure>
  <figure>
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/float/smiley.jpg" alt="image of a smiley face">
    <figcaption>
      Keep smiling!
    </figcaption>
  </figure>
  <figure>
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/float/smiley.jpg" alt="image of a smiley face">
    <figcaption>
      Keep smiling!
    </figcaption>
  </figure>
  <figure>
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/float/smiley.jpg" alt="image of a smiley face">
    <figcaption>
      Keep smiling!
    </figcaption>
  </figure>
  <figure>
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/float/smiley.jpg" alt="image of a smiley face">
    <figcaption>
      Keep smiling!
    </figcaption>
  </figure>
  <figure>
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/float/smiley.jpg" alt="image of a smiley face">
    <figcaption>
      Keep smiling!
    </figcaption>
  </figure>
  <figure>
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/float/smiley.jpg" alt="image of a smiley face">
    <figcaption>
      Keep smiling!
    </figcaption>
  </figure>
</div>
body {
  background-color: #eef7f9;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto;
  width: 90%;
  max-width: 655px;
  padding: 10px;
  background-color: white;
  border: 1px solid deepPink;
  /* uncomment the following rule to clear the floats and see the height expand */
  /*    overflow: hidden;*/
}

.container.note {
  background-color: transparent;
  border: none;
}

figure {
  float: left;
  /* general styles */
  padding: 15px;
  background-color: white;
  border: 1px solid grey;
  margin: .5em;
}