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值比较 ...
随机推荐
- git简易入门(github)
本文讲解下git的使用,包括使用git上传项目工程到github,以及错误解决. 1.安装git 使用apt-get安 sudo apt-get update sudo apt-get install ...
- redhat基本操作
实验:安装redhat 需求:使用DVD镜像文件rhel-server-6.5-x86_64-dvd.iso,在虚拟机中安装RHEL 6系统 分区方案选择“使用所有空间”. 软件组选择“基本服务 ...
- leetcode-695-Max Area of Island(BFS)
题目描述: Given a non-empty 2D array grid of 0's and 1's, an island is a group of 1's (representing land ...
- 架构师养成记--17.disrunptor 多生产者多消费者
入口: import java.nio.ByteBuffer; import java.util.UUID; import java.util.concurrent.CountDownLatch; i ...
- Python基础部分的疑惑解析(1)
Python介绍: 是一种全能的语言,虽然执行效率低,但是开发效率高 现在也存在多种版本,IPYTHON,JPYTHON,但最重要的是CPYTHON,其他都是作用于各种语言的粘合剂版本,执行效率低,C ...
- shell-007:数据库备份,本地保留7天,远程机器保留一个月
## #!/bin/bash d1=`date +%w` # 以周几有变量 d2=`date +%d` # 以每月第几天为变量 local_bakdir=/bak/mysql # 本地备份目录 rem ...
- Spring集成ignite,服务发现问题
问题: 解决办法: 修改C:\Windows\System32\drivers\etc\hosts 配置主机名和ip对应关系: 试试!
- abp angular 前端权限控制
import { AppComponentBase } from '@shared/app-component-base'; this.permission.isGranted(menuItem.pe ...
- Mac下包管理平台homebrew的使用
一.安装 参考:http://www.cnblogs.com/EasonJim/p/6287098.html 二.使用 假设我要安装node,命令如下: 安装软件 brew install node ...
- (转)drbd详解
原文:http://blog.csdn.net/u014421556/article/details/52925442