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

xxxxxxxxxx
 
<!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">
      <!-- this is an empty element for "clearing" the float of the "child" box -->
    </div>
  </div>
​
    
  </div>
</body>
</html>
    