S5-L28-使用clear清除浮動

設計
wrap/header/menu/content版型

header

  <div class="wrap">
    <div class="header"></div>
    <div class="menu"></div>
    <div class="content"></div>
  </div>

.wrap{
  width: 500px;
  height: 100px;
  margin:0 auto;
}

.header{
  height: 50px;
  background-color: #000;
}

.menu{
  width: 100px;
  height: 50px;
  background-color: #fa0;
  float:left;
}

.content{
  width: 300px;
  height: 50px;
  background-color: #00f;
  float:right;
}

結果
(故意設計menu寬100跟content寬300來看等下加上footer的影響)

加上footer

  <div class="wrap">
    <div class="header"></div>
    <div class="menu"></div>
    <div class="content"></div>
    <div class="footer"></div>
  </div>

 .footer{
  height: 80px;
  background-color: gray;
}

發現footer居然會往上擠到menu跟content中間
這不是我們要的效果
我們要的是footer排在menu跟content後面

這是因為float的關係造成：
因為menu跟content有設定float，且只有header有設定高度
所以wrap的高度只會算到header
因此footer會接在header後面


這邊先介紹其中一種解法
在content後面加上clearfix div

 <div class="wrap">
    <div class="header"></div>
    <div class="menu"></div>
    <div class="content"></div>
    <div class="clearfix"></div>
    <div class="footer"></div>
  </div>

.clearfix{
  clear:both;
}

設定clear:both後，就會將前面的float效果清掉，而wrap也就會把float元素的高度也都算進去，所以得到我們要的效果