什么是BFC和hasLayout？

<style>
  *{margin: 0;padding: 0;}
  #demo{}
  #demo li{overflow: hidden;margin-bottom: 15px; list-style: none;background-color: #900;_zoom:1;}
  #demo .thumb{width: 150px;height: 150px;float: left;background-color: #f00;margin-right: 5px;_margin-right: 2px;}  /* ie6浮动和不浮动元素间的3px bug，即ie下浮动元素margin-left/right正确值应该比其它浏览器的对应值小3px才能保持与其它浏览器显示效果一致 */
  #demo .thumb img{vertical-align: top; border: none;}
  #demo .fix{overflow: hidden;background-color: #080;color:#fff;_height: 1%;}/* overflow: hidden;能触发bfc;height:1%;或zoom: 1;都可用来触发ie的haslayout以达到同bfc一样的显示效果 */
  #demo .tr{text-align: right;}
  #demo .right{float: right;width: 200px;height: 35px;line-height: 35px;background-color: yellow;margin-left: 5px;_margin-left: 2px;}
 </style>
 <br />
 <br />
 <ul id="demo">
  <li>
   <a href="#" class="thumb">
    <img src="" alt="这是图片！"/>
   </a>
   <div class="fix">
    <h2>标题标题标题标题</h2>
    <p>描述描述描述描述描述描述描述描述描述描述描述描述描述</p>
    <p class="tr"><a href="">更多&gt;&gt;</a></p>
   </div>
  </li>
  <li>
   <a href="#" class="thumb">
    <img src="" alt="这是图片！"/>
   </a>
   <div class="fix">
    <h2>标题标题标题标题</h2>
    <p>描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述</p>
    <p class="tr"><a href="">更多&gt;&gt;</a></p>
   </div>
  </li>
  <li>
   <a href="#" class="thumb">
    <img src="" alt=""/>
   </a>
   <div class="right"></div>
   <div class="fix">
    <h2>标题标题标题标题</h2>
    <p>描述描述描述描述描述描述描述描述描述描述描述描述描述</p>
    <p class="tr"><a href="">更多&gt;&gt;</a></p>
   </div>
  </li>
 </ul>