Code snippet to explain how css float property works

float.html

<style>
  .container {
      height: 30px;
      width: 340px;
      padding: 2px 2px;
      font-size: 12px;
  }
  .float {
      float: left;
  }
  .after-float {
      clear: left;
  }
  .border {
      border-style: solid;
      border-width: 8px;
      margin: 2px 2px 2px 2px;
  }
  .color-red {
      border-color: red;
  }
  .color-yellow {
      border-color: yellow;
  }
  .color-green {
      border-color: greenyellow;
  }
</style>
<div class="container float border color-red">
    <p class="border" style=" border-width: 1px;">Left Float</p>
</div>
<div class="container float border color-yellow">
    <p class="border" style=" border-width: 1px;">Default: Next Left Float will be relative to previous Left Float</p>
</div>
<div class="container after-float border color-green">
    <p class="border" style=" border-width: 1px;">Float Cleared</p>
</div>