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

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

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

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

posted @ 2017-07-13 12:01  milo_蓝色大飞机  阅读(856)  评论(0编辑  收藏  举报