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

<div class="container">
  <div class="box">floats with negative 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, 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: 20px;
  color: #999;
}
.box {
  width: 300px;
  height: 100px;
  margin: 20px 20px -150px 20px;
  background-color: lightblue;
  color: red;
  float: left;
  font-size: 30px;
}

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.