什么是BFC和hasLayout？

关于BFC的介绍，可直接查看站内文章 ：

http://www.111com.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才能保持与其它浏览器显示效果一致，请看下面具体实例：