没清除浮动

html

  1. <header>
  2.         <div>logo</div>
  3.         <nav>导航</nav>
  4.     </header>

css

  1. *{
  2.   margin: 0;
  3.     padding:0;
  4.     box-sizing:border-box;
  5. }
  6. header {
  7.   border:1px solid green;
  8.   padding: 20px;
  9.   text-align: center;
  10. }
  11. div{
  12.         border:1px solid red;
  13.         height:30px;
  14.         width:100px;
  15.         float:left;
  16.     }
  17. nav{
  18.         border:1px solid black;
  19.         height:30px;
  20.         width:400px;
  21.         float:left;
  22.     }
  • 渲染效果
    float布局 - 图1

清除浮动后

  • 给父元素加class=”clearfix”
  1. <header class="clearfix>
  2.         <div>logo</div>
  3.         <nav>导航</nav>
  4.     </header>
  • 加css
  1. .clearfix:after{
  2.     content:'';
  3.     display:block;
  4.     clear:both;
  5.     }
  • 渲染效果
    float布局 - 图2