start lecture 48

Author: 张欧文

starter/04-CSS-Layouts/index.html

@@ -18,7 +18,7 @@ <h6>The Basic Language of the Web: HTML</h6>
     -->
 
     <div class="container">
-      <header class="main-header">
+      <header class="main-header clearfix">
         <h1>📘 The Code Magazine</h1>
 
         <nav>
@@ -28,6 +28,8 @@ <h1>📘 The Code Magazine</h1>
           <a href="#">Flexbox</a>
           <a href="#">CSS Grid</a>
         </nav>
+
+        <!-- <div class="clear"></div> -->
       </header>
 
       <article>
@@ -39,6 +41,7 @@ <h2>The Basic Language of the Web: HTML</h2>
             alt="Headshot of Laura Jones"
             height="50"
             width="50"
+            class="author-img"
           />
 
           <p id="author">

starter/04-CSS-Layouts/style.css

@@ -27,7 +27,7 @@ body {
   padding-right: 40px; */
   padding: 20px 40px;
   margin-bottom: 60px;
-  /* height: 80px; */
+  height: auto;
 }
 
 nav {
@@ -265,3 +265,28 @@ footer p {
 nav p {
   font-size: 18px;
 } */
+
+/* float */
+.author-img {
+  float: left;
+}
+
+#author {
+  float: left;
+  margin-top: 10px;
+  margin-left: 20px;
+}
+
+h1 {
+  float: left;
+}
+
+nav {
+  float: right;
+}
+
+.clearfix::after {
+  content: "";
+  clear: both;
+  display: block;
+}