前言:在最近的笔试中,两次碰到类似的问题,什么情况下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. (五)Audio子系统之AudioRecord.stop

    在上一篇文章<(四)Audio子系统之AudioRecord.read>中已经介绍了AudioRecord如何获取音频数据,接下来,继续分析AudioRecord方法中的stop的实现 函 ...

  2. wireshark 抓包

    Wireshark(前称Ethereal)是一个网络数据包分析软件.网络数据包分析软件的功能是截取网络数据包,并尽可能显示出最为详细的网络数据包数据.Wireshark使用WinPCAP作为接口,直接 ...

  3. JS写游戏

    最近在看萧井陌的视频.感觉一些东西挺有意思的,尤其是解决问题的过程,以及一个好程序应该改进的地方. 萧大的GITHUB:github.com/guaxiao/gua.game.js 视频:https: ...

  4. Scala IDEA for Eclipse里用maven来创建scala和java项目代码环境(图文详解)

    这篇博客 是在Scala IDEA for Eclipse里手动创建scala代码编写环境. Scala IDE for Eclipse的下载.安装和WordCount的初步使用(本地模式和集群模式) ...

  5. select2 使用教程

    用了这么久的Select2插件,也该写篇文章总结总结.当初感觉Select2不是特别好用,但又找不到比它更好的下拉框插件. 在我的印象里Select2有2个版本,最新版本有一些新的特性,并且更新了一下 ...

  6. JavaScript设计模式-13.组合模式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. unity字库精简

    有2种办法,具体看情况使用 1.unity自带功能 选择放入的字体,修改Character项为"Custom set",接着出现Custom Chars中输入你想使用的字符串,字符 ...

  8. mongo实体设计1 tag

    public class TagProperty { private String type; private int count; } @Document(collection = "ta ...

  9. Xml解析过程中遇到“” 1 字节的 UTF-8 序列的字节 1 无效“”问题---idea与eclipse同适用

    转载自:http://blog.csdn.net/zhangzhikaixinya/article/details/7727938 今天在eclipse中编写pom.xml文件时,识别到错误:Inva ...

  10. js处理json数据,java处理json数据

    一.js处理json数据 处理办法之一是把本机json数据或远程返回json数据用eval函数,使之变成DOM对象. 例如: var people = { "programmers" ...