这是项目中遇到的一个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. mybaits-spring demo 记

    代码:https://github.com/bobby96333/demo_spring_batis /pom.xml <?xml version="1.0" encodin ...

  2. 解决TextView多行滑动与NestedScrollView等,滑动冲突,我的解决方案

    1.首先要明白,什么时候回TextView处理滑动,什么时候不处理滑动 1.1往上滑动,到达文本底部就不要再处理了,如果往上滑动不在底部则继续TextView滑动 1.2往下滑动,到达文本顶部就不要再 ...

  3. 2017多校第9场 HDU 6166 Senior Pan 堆优化Dij

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6166 题意:给你一个有向图,然后给你k个点,求其中一个点到另一个点的距离的最小值. 解法:枚举二进制位 ...

  4. 在Caffe中使用 DIGITS（Deep Learning GPU Training System）自定义Python层

    注意:包含Python层的网络只支持单个GPU训练!!!!! Caffe 使得我们有了使用Python自定义层的能力,而不是通常的C++/CUDA.这是一个非常有用的特性,但它的文档记录不足,难以正确 ...

  5. yii2 一对多关系的对分页造成的影响

    下面代码中关联descies时,匹配较多,造成分页数不对,需要加条件限制: $model = User::find() ->joinWith('app') ->joinWith(['des ...

  6. js上传文件（图片）限制格式及大小为3M

    本文保存为.html文件用浏览器打开即可测试功能   <form id="form1" name="form1" method="post&qu ...

  7. 15：django 缓存架构

    动态网站的一个基本权衡就是他们是动态的,每次一个用户请求一个页面,web服务器进行各种各样的计算-从数据库查询到模板渲染到业务逻辑-从而生成站点访问者看到的页面.从处理开销的角度来看,相比标准的从文件 ...

  8. Qtp测试中的密码问题

    Qtp中,一般录制的脚本进行回放的时候就会遇到各种各样的问题,导致回放不能顺利进行,比如这次我在录制一个简单的登陆脚本的时候,就遇到了这样的问题: [遇到问题] 1,  录制好的脚本中的密码不能正常输 ...

  9. hdu 5117 数学公式展开 + dp

    题目大意:有n个灯泡,m个按钮,(1 <= n, m <= 50),每个按钮和ki 个灯泡相关, 按下后,转换这些灯泡的状态,问你所有2^m的按下按钮的 组合中亮着的灯泡的数量的三次方的和 ...

  10. 【ASP.NET MVC】提高页面加载速度：脚本优化

    在这里我们说一下脚本优化的三个方法: 一.在我们做Web开发的时候,当我们引用Js文件的时候,我们一般会将js文件放在文档的head标签中,这时当页面加载的时候,浏览器会按着由上到下的顺序,当浏览器遇 ...