关于左边图片右边列表的新闻布局模式

类似如此的模块，不管是在面试中或是项目需求中都会常碰到，多数使用定宽浮动的方法实现，但这样一来，也就失去了其灵活度。若不定宽，文字又会围着图片环绕。

所以要解决的问题，就是让宽度不定死，使用浮动的同时，文字不会围绕着图片。

实际上，如果这里只设置了图片向右浮动，在chrome或firefox下用工具查看列表的区域，会把图片的区域一并覆盖，也就是说它会跟flaot box的边缘重叠。如下图

所以只要解决了元素与float box边缘重叠，这个问题也就可以迎刃而解了。

这里涉及到了一个block formatting context的概念。触发了BFC的块级元素，它的边缘不会和float box重叠。所以正解是：

<style>
.img{float: left; border:1px solid #CCC}
ul{ overflow:hidden;zoom:1}
</style>

<div class="main">
    <div class="img"></div>
    <ul><li></li></ul>
</div>

 

参考资料：http://hikejun.com/blog/2011/10/26/%E8%BF%91%E6%9C%9F%E9%9D%A2%E8%AF%95%E6%84%9F%E5%8F%97/

关于Block Formatting context：http://simplej.blog.163.com/blog/static/181014362201110334948690/