Creating a New Formatting Context

• Floated Elements
  float: left||right
• Non-Static or Relative Positioning
  position: absolute||fixed
• Non-block level boxes
  display:inline-block||table-cell||table-caption
• Block-level boxes with any value of overflow other than visible
  overflow: auto||hidden||scroll
• Flexboxes

Behaviors of New Contexts

• Margins do not stick out.
• Only boxes in the same context experience vertical margin collapsing.
• They do not overlap floats.
• They contain floats.

Exploiting the Behavior

This is one way to clear floats (vs. the .clearfix hack). In other words, a new context contains floats.

You can create a columnar layout (each block formatting context creates a column if there is enough horizontal space for it).