莫名其妙的float:left; 不能使元素紧贴父级的坑

这是项目中遇到的一个CSS的坑，做个记录，主要的原因还是浮动后脱离文档流，两个浮动的元素处于同一文档流中会相互影响位置的问题；

先上代码吧：
效果预览地址：浮动不能靠左的情况;

原本红色模块应该处于蓝色块的最左边，但是我们可以看到，留了一点间距，为什么呢？因为被绿色模块挡住了；
分析下：首先绿色模块是浮动的，已经脱离的文档流； 蓝色模块使用margin-top的负值实现一种错层的效果，红色模块在蓝色模块中浮动，也脱离的文档流，那么，问题就来了，绿色和红色都使用浮动，脱离文档流后处于同一层级，这时候就会产生相互的影响，导致红色模块无法贴近蓝色块最左；
解决方法：不要使用margin-top赋值来实现错层效果；使用position:relative; top: -20px; 然后再设置 margin: 0 auto;就可以解决这个问题；