float失效的情况
前言:在最近的笔试中,两次碰到类似的问题,什么情况下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失效的情况的更多相关文章
- css定位、position与float同时使用的情况
一.css定位 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 1.普通流:未专门指定的元素都在普通流中定位,position:static/relative;和float:none;也在普通 ...
- maven仓库失效的情况下搭建maven项目
maven仓库失效的情况下搭建maven项目 1,在有maven仓库的情况下mvn clean package 2,整个项目拷贝到没有的环境下 3,ls |xargs -t -I a cp a/pom ...
- oracle 索引失效的情况分析
见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp54 1) 没有查询条件,或者查询条件没有建立索引 2) 在查询条件上 ...
- 当inline-block或者float失效的时候怎么弄
当我们想要元素水平排列的时候,inline-block或者float是最好的选择了,但是当父元素的宽高都设置了的时候,子元素会失效,如下: 代码: <!DOCTYPE html> < ...
- Mysql索引查询失效的情况
首先,复习一下索引的创建: 普通的索引的创建: CREATE INDEX (自定义)索引名 ON 数据表(字段); 复合索引的创建: CREATE INDEX (自定义)索引名 ON 数据 ...
- 索引之----mysql单列索引失效的情况
使用的索引名称: 1.隐式转换导致索引失效. 由于表字段定义为vachar类型,但在查询时把该字段作为number类型 以及where条件传给mysql. 2.对索引列进行任何操作(计算(+.-.*. ...
- jquery绑定事件失效的情况(转)
原文地址:http://www.thinksaas.cn/group/topic/348453/ jQuery中文api地址:http://www.jquery123.com/api/ jQuery官 ...
- Xcode 不提示, 引用失效等情况
在编写xcode的项目的时候出现过代码不高亮的症状,而且所有的warning都不再提示,include的内容也显示symbol not found,非常奇怪,解决方案如下: 方法一: 1.把.pch里 ...
- z-index失效的情况
1.父标签 position属性为relative: 2.问题标签无position属性(不包括static): 3.问题标签含有浮动(float)属性. 4.问题标签的祖先标签的z-index值比较 ...
随机推荐
- (五)Audio子系统之AudioRecord.stop
在上一篇文章<(四)Audio子系统之AudioRecord.read>中已经介绍了AudioRecord如何获取音频数据,接下来,继续分析AudioRecord方法中的stop的实现 函 ...
- wireshark 抓包
Wireshark(前称Ethereal)是一个网络数据包分析软件.网络数据包分析软件的功能是截取网络数据包,并尽可能显示出最为详细的网络数据包数据.Wireshark使用WinPCAP作为接口,直接 ...
- JS写游戏
最近在看萧井陌的视频.感觉一些东西挺有意思的,尤其是解决问题的过程,以及一个好程序应该改进的地方. 萧大的GITHUB:github.com/guaxiao/gua.game.js 视频:https: ...
- Scala IDEA for Eclipse里用maven来创建scala和java项目代码环境(图文详解)
这篇博客 是在Scala IDEA for Eclipse里手动创建scala代码编写环境. Scala IDE for Eclipse的下载.安装和WordCount的初步使用(本地模式和集群模式) ...
- select2 使用教程
用了这么久的Select2插件,也该写篇文章总结总结.当初感觉Select2不是特别好用,但又找不到比它更好的下拉框插件. 在我的印象里Select2有2个版本,最新版本有一些新的特性,并且更新了一下 ...
- JavaScript设计模式-13.组合模式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- unity字库精简
有2种办法,具体看情况使用 1.unity自带功能 选择放入的字体,修改Character项为"Custom set",接着出现Custom Chars中输入你想使用的字符串,字符 ...
- mongo实体设计1 tag
public class TagProperty { private String type; private int count; } @Document(collection = "ta ...
- Xml解析过程中遇到“” 1 字节的 UTF-8 序列的字节 1 无效“”问题---idea与eclipse同适用
转载自:http://blog.csdn.net/zhangzhikaixinya/article/details/7727938 今天在eclipse中编写pom.xml文件时,识别到错误:Inva ...
- js处理json数据,java处理json数据
一.js处理json数据 处理办法之一是把本机json数据或远程返回json数据用eval函数,使之变成DOM对象. 例如: var people = { "programmers" ...