D3 Examples - mfa dt bootcamp web class: Floats 2, child inheritance and clearing

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS Float inheritance</title>
  <style type="text/css">
  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .box, .sm-box {
    width: 50%;
    height: 50%;
    float: left;
  }
  .sm-box {
    clear: both; /* comment this out to show how children inherit floats*/
  }
  .box1 {
    background-color: green;
  }
  .box2 {
    background-color: blue;    
  }
  .box3 {
    background-color: orange;
  }
  .box4 {
    background-color: yellow;
  }
  </style>
</head>
<body>
  <h1>Child elements will by default inherit their parent's float. <br>To clear them we use /* clear:both */</h1>
  <h2>Open the web inspector and turn off clear: both on the boxes that have a "sm-box" class</h2>
  <div class="box box1">
    <div class="sm-box box3"></div>
    <div class="sm-box box4"></div>
  </div>
  <div class="box box2">
    
  </div>
</body>
</html>
    