这是项目中遇到的一个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. 2017中国大学生程序设计竞赛 - 网络选拔赛 HDU 6150 Vertex Cover 二分图，构造

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6150 题意:"最小点覆盖集"是个NP完全问题 有一个近似算法是说—每次选取度数最大 ...

  2. VPS速度测试（4）：上传下载速度、服务器带宽、Ping响应时间

    1.VPS的速度好坏经常是我们选择某一个VPS商家的重要参考指标,对于国外的VPS主机我们可以执行以下命令来测试VPS入口带宽是多少. wget https://cachefly.cachefly.n ...

  3. C++中多线程与Singleton的那些事儿

    前言 前段时间在网上看到了个的面试题,大概意思是如何在不使用锁和C++11的情况下,用C++实现线程安全的Singleton. 看到这个题目后,第一个想法就是用Scott Meyer在<Effe ...

  4. myeclipse安装插件phpeclipse后进行PHP代码编写

    平常一般写java代码,有时也捣腾一下php,原来安装过zend studio来编写php代码,无奈电脑越来越卡,于是卸载了zend,然后在myeclipse中安装phpeclipse这款插件来完成p ...

  5. 阿里云ECS的使用

    一.阿里云ECS的使用 1.Linux CentOS Ubuntu Readhat 2.远程登录 xshell 远程登录 winScp 远程文件操作 3.Linux命令 cd 目录名 ls . ls ...

  6. [How to] 动态布局可变高度的cell的应用

    1.简介 代码:https://github.com/xufeng79x/DynamicChangeableCell 微博界面,微信和QQ聊天界面,这些界面的布局大都不确定,且每一条消息的高度也不一样 ...

  7. java 多线程剖析

    问题的缘由源自于一道简单的面试题:题目要求如下: 建立三个线程,A线程打印10次A,B线程打印10次B,C线程打印10次C,要求线程同时运行,交替打印10次ABC. 解决问题前我们前补充一些基本知识: ...

  8. 1：django models

    重温django model 1:many-to-many 的额外属性 一般情况下,many-to-many直接就可以满足我们的要求,考虑这样一种情况: 音乐家和乐团是many-to-many的关系, ...

  9. LeetCode解题报告—— Trapping Rain Water

    Given n non-negative integers representing an elevation map where the width of each bar is 1, comput ...

  10. Merge Intervals——STL的应用

    Given a collection of intervals, merge all overlapping intervals. For example, Given [1,3],[2,6],[8, ...