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

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

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

莫名其妙的float:left; 不能使元素紧贴父级的坑的更多相关文章

  1. float浮动问题：会造成父级元素高度坍塌；

    float浮动问题:会造成父级元素高度坍塌: 解决办法:清除浮动:clear:both; 给父元素高度:height(不是很可取) 给父元素:display:inline-black:(问题:marg ...

  2. html css样式子元素相对父级元素定位

    废话不多说. 父级元素 样式设置: position:relative; 子元素样式: position: absolute; 这样就可以达到子元素相对父级元素定位了.

  3. Jquery遍历之获取子级元素、同级元素和父级元素

    Jquery遍历之获取子级元素.同级元素和父级元素 Jquery的遍历,其实就当前位置的元素相对于其他元素的位置的关系进行查找或选取HTML元素.以某项选择开始,并沿着这条线进行移动,或向上(父级). ...

  4. IE7下，input元素相对父级元素错位解决办法

    原因: 当input仅仅包含父元素,父元素拥有margin属性时,IE7的input就会错误的继承margin属性. 解决办法: 给input元素外面套一个span,label这样的内联元素,这样就会 ...

  5. jquery获取元素（父级的兄弟元素的子元素）

    一.获取父级元素 使用jquery获取父级元素: parent() 例如:$(this).parent('ul'); 二.获取同级元素 使用jquery获取同级元素:siblings() 例如:$(t ...

  6. jQuery使用（四）：DOM操作之查找兄弟元素和父级元素

    查找兄弟元素 向下查找兄弟元素 next() nextAll() nextUntil() 向上查找兄弟元素 prev() prevAll() prevUntil() 查找所有兄弟元素 siblings ...

  7. jq点击元素删除父级

    首先要能找到父级:需要操作的dom结构如下: <tbody> <tr> <td>星期一早起</td> <td class="status ...

  8. js原生子级元素阻止父级元素冒泡事件

    <html> <head> <style type="text/css"> #hide{ width:75%;height:80px;backg ...

  9. overflow-x scroll 内部元素滚动,父级容器代码

    display: -webkit-box; overflow-x: scroll; -webkit-overflow-scrolling: touch;

随机推荐

  1. elasticsearch索引加别名

    curl -XPOST 'http://localhost:9200/_aliases' -d '    {        "actions": [            {&qu ...

  2. Flask 的系统学习

    详细看地址: http://www.cnblogs.com/wupeiqi/articles/7552008.html 一. 说明 Flask是一个基于Python开发并且依赖jinja2模板和Wer ...

  3. 深度学习方法：受限玻尔兹曼机RBM（二）网络模型

    欢迎转载,转载请注明:本文出自Bin的专栏blog.csdn.net/xbinworld. 技术交流QQ群:433250724,欢迎对算法.技术.应用感兴趣的同学加入 上解上一篇RBM(一)基本概念, ...

  4. 760. Find Anagram Mappings

    Given two lists Aand B, and B is an anagram of A. B is an anagram of A means B is made by randomizin ...

  5. windows10 易升 下载失败 解决方法

    在你剩余最大空间的硬盘里有一个名字大概是Windows10Updata的文件夹里找到一个名字14339开头的升级镜像,把这个文件的名字用记事本保存下来方便以后使用,同时在这个文件夹里还有一个叫prod ...

  6. JS中的对象和方法简单剖析

    众所周知,在js中对象就是精髓,不理解对象就是不理解js. 那么什么事js中的对象呢? 在js中,几乎一切皆对象: Boolean ,String,Number可以是对象(或者说原生数据被认作对象): ...

  7. HBase shell 命令创建表及添加数据操作

    创建表,表名hbase_1102,HBase表是由Key-Value组成的,此表中Key为NAME   此表有两个列族,CF1和CF2,其中CF1和CF2下分别有两个列name和gender,Chin ...

  8. Rsync+Inotify 搭建实时同步数据

    1.安装软件包 # yum install inotify-tools # yum -y install rsync 2.同步机器相互添加信任 [root@host-10-0-100-106 ~]# ...

  9. php5.5 安装

    1.php安装 wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-6.repo yum install zl ...

  10. LeetCode 344. Reverse String(反转字符串)

    题目描述 LeetCode 344. 反转字符串 请编写一个函数,其功能是将输入的字符串反转过来. 示例 输入: s = "hello" 返回: "olleh" ...