这是项目中遇到的一个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. python按比例随机切分数据

    在机器学习或者深度学习中,我们常常碰到一个问题是数据集的切分.比如在一个比赛中,举办方给我们的只是一个带标注的训练集和不带标注的测试集.其中训练集是用于训练,而测试集用于已训练模型上跑出一个结果,然后 ...

  2. awk常见操作整理（更新）

    awk的基本结构 awk 'BEGIN{} pattern {} END {}' #pattern {} 部分是针对每行进行循环处理的,有pattern表示对匹配到的行处理,没有pattern表示对所 ...

  3. 安装ubuntu-server16.0，设置WiFi

    想装个server版的Linux系统玩玩,下面记录一下遇到的坑. 1:安装语言选英文:可能是因为其他原因,我选中文的时候安装失败了,最后一次选中文的时候成功了. 2:以前装了一个ubuntu的,后面想 ...

  4. Pow(x, n)——这也能用二分法！！！！

    Implement pow(x, n). 下面介绍一下解决该问题的几种方法以及要注意的地方: 1)最直观容易想到的方法就是用递归方法求n个x的乘积,注意考虑n的正负号,时间复杂度为O(n) class ...

  5. Python基础系列----语法、数据类型、变量、编码

    1.基本语法                                                                                        Python ...

  6. [译]怎样在Vue.js中使用jquery插件

    原文:http://gambardella.info/2016/09/05/guide-how-to-use-vue-js-with-jquery-plugins 使用Vue真的太棒了,但是也有可能使 ...

  7. vue小荔枝，时间控件，动态按月份增减。

    依赖框架有jq,bootstrap3.0,vue2.0; 自封装(搬运)时间控件,bootstrap-datetimepicker.资源下载:看这里 需求: 默认本地时间,相隔一个月 四个选项:1一个 ...

  8. 一：Ionic Framework初体验

    因项目关系,需要开发一个平板使用的应用程序,刚开始以为需要使用Andriod,后来经理提供了一个解决方案,Ionic Framework https://ionicframework.com/ 第一步 ...

  9. mongoDB学习第一天之增删改查

    mongoDB 是 no-sql 的一种数据库. 创建数据库: use dbName #数据库中如果存在 dbName ,切换到此数据库:如果不存在此数据库,则创建 dbName 数据库!(tip:当 ...

  10. 如何用jmeter对websockt和protobuf进行压力测试

    参考代码:https://github.com/hutao722/kekexinxin 这是基于Jmeter WebsocketSampler的插件,支持对基于websocket和protobuf的服 ...