zoukankan      html  css  js  c++  java
  • 莫名其妙的float:left; 不能使元素紧贴父级的坑

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

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

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

  • 相关阅读:
    mysql高并发配置
    php xml转array的方法
    双系统,一系统损坏后的解决方案之硬盘启动
    最长公共前缀
    罗马数字转整数
    回文数
    整数反转
    一、数组---两数之和
    从尾到头打印链表
    替换空格
  • 原文地址:https://www.cnblogs.com/milo-wjh/p/7159754.html
Copyright © 2011-2022 走看看