2017年8月13日 星期日

[html] clearfix

Use clearfix in CSS

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
     <link rel="stylesheet" href="css/reset.css"> 
    <link href="css/style2_1.css" rel="stylesheet">
    
  </head>
  <body>
  <header class="header"></header>
  <div class="wrapper clearfix">
    <main class="main">aaa</main>
    <div class="sidemenu">bbb</div>
  </div>
  <footer class="footer">
    
  </footer>
  </body>
</html>

CSS

.clearfix::after{
  content: '';
  display: block;
  clear: both;
}

Results