CodePen Embed - floats with zero outer height not shorten line box

<div class="container">
  <div class="box">floats with zero outer height not shorten line box</div>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente ab deserunt quidem vero vitae, tenetur quibusdam libero in est ex rem vel odio soluta facere. Voluptate perferendis suscipit enim deserunt.</p>
</div>

.container {
  width: 400px;
  outline: 3px solid black;
  font-size: 24px;
  color: #999;
}
.box {
  height: 0;
  color: red;
  float: left;
  font-size: 36px;
}

This Pen is owned by Titangene on CodePen.

See more by @titangene on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.