mfa dt bootcamp web class: Floats 3; clearing with a subsequent element or clearfix

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Clearfixing Floats</title>
  <style type="text/css">
  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

.parent {
    width: 300px;
    margin: 0 auto;
    background-color: yellow;
    border: 10px solid hsla(0, 0%, 0%, 0.6);
  }

.parent p {
    padding: 10px;
  }

.child {
    width: 100px;
    height: 200px;
    padding: 10px;
    float: right;
    background-color: blue;    
  }

/* manual clear with an empty element */
  .clear {
    /*clear: both;*/
  }

/* clearfix method */
  /* apply the class "group" to the parent 
  and it will self clear any children */
  .group:before,
  .group:after {
    content: "";
    display: table;
  }
  .group:after {
    clear: both;
  }
  .group {
    zoom: 1; /* for IE6 & 7*/
  }

</style>
</head>
<body>
  <h1>We can <em>clear</em> floats with an empty subsequent element OR <br> by using the <em>clear fix</em> method.</h1>
  <h3>Open the web inspector and turn on the clear:both property in the box that has a class of "clear"</h3>
  <h3>Then turn it back off add the class "group" to the parent div</h3>
  <div class="box parent">
    <div class= "box child"></div>
    <p> some text and stuff bla bla bla. </p>
    <div class="clear">
      
    </div>
  </div>

</div>
</body>
</html>