前言:在最近的笔试中,两次碰到类似的问题,什么情况下float会失效?我目前知道的有2种:

1)display:none;

2)position:absolute、fixed。

(1)display:none

设置成display:none了之后,float失效这一点自然不用说。因为此时元素已经不在dom树里了,float当然起不了作用。

(2)position:absolute、fixed。

先看看没有设置position:absolute/fixed时的表现:

<div id="wrap">
<div id="div1">浮动div</div>
<div id="div2">参考div</div>
</div>
#wrap{
width:300px;
height:300px;
border:1px solid black;
position: relative;
margin: 0 auto;
}
#div1{
width:100px;
height:100px;
background: red;
float:left; }
#div2{
width:100px;
height:100px;
background:blue;
float:left;
}

现在,为红色div1设置position:absolute/fixed:

#div1{
width:100px;
height:100px;
background: red;
float:left;
position: fixed;
/*或者position: absolute;*/
top:20px;
left:20px;
}

                      

position:absolute                                                         position:fixed

以上两种,无论是fixed(相对窗口定位)或者absolute(相对最近的position属性不为static的祖先元素),都使得红色div的float失效,于是蓝色div直接浮动到边界的左上角。

float失效的情况的更多相关文章

  1. css定位、position与float同时使用的情况

    一.css定位 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 1.普通流:未专门指定的元素都在普通流中定位,position:static/relative;和float:none;也在普通 ...

  2. maven仓库失效的情况下搭建maven项目

    maven仓库失效的情况下搭建maven项目 1,在有maven仓库的情况下mvn clean package 2,整个项目拷贝到没有的环境下 3,ls |xargs -t -I a cp a/pom ...

  3. oracle 索引失效的情况分析

    见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp54     1) 没有查询条件,或者查询条件没有建立索引 2) 在查询条件上 ...

  4. 当inline-block或者float失效的时候怎么弄

    当我们想要元素水平排列的时候,inline-block或者float是最好的选择了,但是当父元素的宽高都设置了的时候,子元素会失效,如下: 代码: <!DOCTYPE html> < ...

  5. Mysql索引查询失效的情况

    首先,复习一下索引的创建: 普通的索引的创建: CREATE INDEX  (自定义)索引名  ON  数据表(字段); 复合索引的创建: CREATE INDEX  (自定义)索引名  ON  数据 ...

  6. 索引之----mysql单列索引失效的情况

    使用的索引名称: 1.隐式转换导致索引失效. 由于表字段定义为vachar类型,但在查询时把该字段作为number类型 以及where条件传给mysql. 2.对索引列进行任何操作(计算(+.-.*. ...

  7. jquery绑定事件失效的情况(转)

    原文地址:http://www.thinksaas.cn/group/topic/348453/ jQuery中文api地址:http://www.jquery123.com/api/ jQuery官 ...

  8. Xcode 不提示, 引用失效等情况

    在编写xcode的项目的时候出现过代码不高亮的症状,而且所有的warning都不再提示,include的内容也显示symbol not found,非常奇怪,解决方案如下: 方法一: 1.把.pch里 ...

  9. z-index失效的情况

    1.父标签 position属性为relative: 2.问题标签无position属性(不包括static): 3.问题标签含有浮动(float)属性. 4.问题标签的祖先标签的z-index值比较 ...

随机推荐

  1. trunc 函数用法

    转载至:http://blog.csdn.net/aqszhuaihuai/article/details/6303686 1.trunc用于日期,可精确到年,月和日. select trunc(sy ...

  2. O01-Linux CentOS7中利用RDO部署OpenStack

    一.前言 1.RDO是红帽Red Hat 的一个开源项目,全称是RPM Distribution of OpenStack,能够帮助我们快捷部署OpenStack项目. 官方部署文档:https:// ...

  3. 【Alpha】Phylab 测试报告

    PhyLab Alpha 测试报告 测试中发现的bug Bug 可能原因 实验区域发布评论,如果需要验证码,无法填写 评论频率过快,实验区未接入验证码系统 忘记密码,但无邮件发送 忘记密码部分暂未修复 ...

  4. System Verilog基础(二)

    这一篇笔记主要记录Procedural,Process,Task and function,Interface和Communication中值得注意的点. 1.Procedural 写testbenc ...

  5. 【总结】sqli-labs Less(1-35) 小结

    0x00   工具 phpstudy2016:链接:http://pan.baidu.com/s/1bpbEBCj 密码:fmr4 sqli-labs-master:链接:http://pan.bai ...

  6. MONO MessageBox 类

    MessageBox类,负责提示各种消息.   using System; using Android.App; using Android.Content; namespace Box { publ ...

  7. MVC3权限验证,诡异的OnAuthorization

    mvc3权限验证 protected override void OnAuthorization(AuthorizationContext filterContext) { if (//开始权限验证返 ...

  8. 编译原理LL(1)文法

    从左向右扫描输入,然后产生最左推导(就是每次都把最左边的非终结字符用产生式代替). (一)First集合 比如有产生式 A-> + T | - P , 当我们读到串为 +开头的时候,我们可以很直 ...

  9. 翻译:WebAssembly简介:我们为什么要关心这个技术? ​​​​

    原文: https://tomassetti.me/introduction-to-webassembly/ WebAssembly简介:我们为什么要关心这个技术? ​​​​ 在对抗js的伟大战斗中有 ...

  10. hadoop-0.20.2安装配置

    该环境在Vmware Workstation 12 上安装配置一共三台机器master,slave1,slave2. 操作系统:Cenos 7.0 hadoop 版本:hadoop-0.20.2,版本 ...