摘要： 类似如此的模块，不管是在面试中或是项目需求中都会常碰到，多数使用定宽浮动的方法实现，但这样一来，也就失去了其灵活度。若不定宽，文字又会围着图片环绕。所以要解决的问题，就是让宽度不定死，使用浮动的同时，文字不会围绕着图片。实际上，如果这里只设置了图片向右浮动，在chrome或firefox下用工具查看列表的区域，会把图片的区域一并覆盖，也就是说它会跟flaot box的边缘重叠。如下图所以只要解决了元素与float box边缘重叠，这个问题也就可以迎刃而解了。这里涉及到了一个block formatting context的概念。触发了BFC的块级元素，它的边缘不会和float box重叠。所以 阅读全文