CSS-float-V2-contained.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Float V2</title>
  <link rel="stylesheet" href="css-float-V2.css">
</head>
<body>
  <h2>Layout with Cleared Floats </h2>
  <header>
    <code>&#60;header&#62;</code>
  </header>
  <section>
    <code>&#60;Section&#62; <br> Float:Left  </code>
  </section>
  <aside>
    <code>&#60;Aside&#62;<br> Float:Right</code>
  </aside>
  <footer>
    <code>&#60;Footer&#62;<br> Clear:Both</code>
  </footer>
  <br>
 
  <h2>Layout with Contained Floats </h2> <!--Also known as "clearfix"-->
  <header>
    <code>&#60;header&#62;</code>
  </header>
 <div class="group">
   <code class="default">&#60;Section=Group&#62;</code>
  <section>
    <code>&#60;Section&#62; <br> Float:Left  </code>
  </section>
  <aside>
    <code>&#60;Aside&#62;<br> Float:Right</code>
  </aside>
 </div>
  <footer>
    <code>&#60;Footer&#62;<br> Clear:Both</code>
  </footer>

</body>
</html>