下面我来给各位同学介绍关于什么是BFC和hasLayout，希望文章能给你提供帮助
关于BFC的介绍，可直接查看站内文章 ：
http://www.111cn.net/cssdiv/css/60534.htm
而hasLayout是ie私有的概念，ie7及更低版本的ie浏览器不支持BFC，但我们可以针对ie7、6浏览器加入对应的hasLayout规则来实现BFC的效果！具体怎么触发haslayout不是本文重点，请自行查阅相关资料
2、BFC和hasLayout布局的优势在哪里
相比于圣杯布局（查看示例），BFC和hasLayout布局显示灵活，控制也更方便，与媒体查询media querry结合使用，能很好地实现多设备兼容的需求！
3、使用BFC和hasLayout应该注意的问题
1、overflow:hidden触发BFC的同时，也能触发ie7的hasLayout，但overflow:hidden是ie7新添加的触发hasLayout的新属性，ie6并不支持，因此要兼容ie6必须加_zoom:1;
2、浮动和不浮动元素间，ie6会有3px的间隙，这是ie6的bug，解决方法是：若浮动元素是左浮动，则给左浮动元素加margin-right:-3px;若浮动元素是右浮动，则给右浮动元素加margin-left:-3px;
3、不浮动元素的左间距margin-left值若小于左浮动的元素宽度则不会生效，同理，不浮动元素的右间距margin-right值若小于右浮动的元素宽度也不会生效！这个跟没触发bfc或ie的haslayout时,不浮动元素的左右间距取值生效情况是保持一致的；
4、在实际运用中，浮动元素跟不浮动元素间都会加入左右间距控制，考虑到浮动元素可能会加入当前流行的多设备兼容的media query ，浮动元素的宽度会随着媒体查询的设置的css变化而变化，而不浮动元素的margin-left/right值能否生效又是跟浮动元素的宽度关联的，这时在不浮动元素上加入margin-left/right值来控制元素的间距，显示麻烦，不好掌控，推荐给浮动和不浮动元素间加间距的做法是：直接给浮动元素加margin值，而不是给不浮动元素加margin值，唯一要注意的是给浮动元素加margin值时，应该考虑到ie6浮动和不浮动元素间的3px bug，即ie下浮动元素margin-left/right正确值应该比其它浏览器的对应值小3px才能保持与其它浏览器显示效果一致，请看下面具体实例：
代码如下
复制代码
<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="">更多>></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="">更多>></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="">更多>></a></p>
</div>
</li>
</ul>
