clhenrick/index.html

## index.html
<!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>
	<!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>