关于浮动float属性和position:absolute属性的区别

最近返回头看了很多书籍,一直在纠结float属性和absolute绝对定位的区别和使用的情况,给大家分享一下自己的心得和体会吧。

1,float属性

float属性意义是让元素拜托独占一行的霸道总裁,成为一个普普通通的人。比如下面这个例子

如图,我们为第一个盒子第一个盒子设置了float:left属性,他也就失去了霸道总裁独占一行的特点,下面的盒子就上位。

但是我们发现一个问题,如果总裁通知完全浮动(也就是说不在公司了),那么下面的div应该把他的位置完全占领,也就是说文字也应该被总裁覆盖,但是发现并没有,我们得出结论,第一个div虽然浮动,但是他原来的位置还在,紧邻的div虽然能够与他平起平坐,但是也不能完全骑在他头上。并且,第一个div会随着content的内容的增加而width增加,从而挤占相邻div的横向宽度。

2,position:absolute属性

当我们把第一个div的position属性设置为absolute时,效果如下图:

我擦,令人惊奇的一幕发生了,相邻的div里面的内容被第一个div遮盖,这就说明第一个div已经完全脱离了文档流。相邻的div也就视他不存在,爱咋地咋地。

 

 

通过上面的这个小例子,可以总结为,float属性虽然也是漂浮,但是不是完全漂浮,他只是失去了独占一行的属性,但是他大小所占的位置还是存在的(不能视而不见)。

而position:absolute已经完全放弃了自己的所有一切,成为了天空的一朵云彩。

转载于:https://www.cnblogs.com/Arther-J/p/5380085.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/257392.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Climbing Stairs

You are climbing a stair case. It takes n steps to reach to the top. Each time you can either climb 1 or 2 steps. In how many distinct ways can you climb to the top? 分析:考虑走第n步时的情况,可以从第n-1个台阶走一步,也可以从…

3dmax linux版本,如何安装Linux版FLOW-3D及注意事项

如何安装Linux版FLOW-3D及注意事项安装Linux版的flow3d流程:1、复制flow3d安装CD盘中unix文件夹到Linux系统桌面;(或从CD中直接安装也可以)2、从terminal进入unix文件夹;3、./install或./install_flow3d4、提示是否接受license协议&#xff0…

高级组合技打造“完美” 捆绑后门

0x00 简介 之前写过一篇关于客户端钓鱼的文章:《使用powershell Client进行有效钓鱼》中,在使用各个Client进行测试的过程中,个人发现CHM文件是最好用的一个,但是其缺点就是会弹黑框,这样就会让被攻击者察觉。那么怎么…

使用友盟分享心得(SSO登陆,不能获取accesstoken,不能跳转APPSSO登陆的问题)

在xcode5中plist 文件是默认有 Bundle DisplayName的 而如果工程是在xcode6环境下开发的话。 这时候就会出现友盟无法跳转微博跟QQSSO的问题。 solution:在plist中加入bundle DisplayName 转载于:https://www.cnblogs.com/ZippoatiOS/p/4443933.html

linux单线程处理多个请求,redis是单线程的,如何处理并发请求?

疑问:redis是单线程的,如何并发处理多个请求?下面是我个人的理解。答案是:使用操作系统的多进程机制。也就是我们常说的,多路复用API,多路复用API本质上是对操作系统多路复用功能的封装。什么是操作系统的多…

Cloudera Manager内部结构、功能包括配置文件、目录位置等

2019独角兽企业重金招聘Python工程师标准>>> 问题导读 1.CM的安装目录在什么位置? 2.hadoop配置文件在什么位置? 3.Cloudera manager运行所需要的信息存在什么位置? 4.CM结构和功能是什么? 1. 相关目录 /var/log/cloud…

python 学习笔记(一)

在Windows上安装Python 首先,从Python的官方网站www.python.org下载最新的2.7.9版本,地址是这个: http://www.python.org/ftp/python/2.7.9/python-2.7.9.msi 然后,运行下载的MSI安装包,在选择安装组件的一步时&#x…

An ffmpeg and SDL Tutorial

http://dranger.com/ffmpeg/转载于:https://www.cnblogs.com/qwertWZ/p/4447141.html

linux模式匹配,sed的模式匹配用法探讨

[rootsunsky Desktop]# cat sunskyabcdef[rootsunsky Desktop]# cat sunsky|sed 1,2d|sed 1,2def[rootsunsky Desktop]# cat sunsky|sed -e 1,2d -e 1,2ddef问题:sed中-e的意思是直接在指令列模式上进行sed的动作编辑按照,那么按照-e的含义,上…

Qualcomm QXDM工具简介和log抓取

高通工具简介QXDM 简介QXDM 安装QXDM 激活QXDM 使用AT打开Diagnostic口 QXDM 配置1 Message View ConfigurationMessage PacketsLog PacketsLog PacketsOTAEvent ReportsStrings2 Log View Config3 QXDM-保存配置文件4 QXDM-导入配置文件QPST 端口配置QXDM 抓取log QXDM LOG保存…

layout_gravity

layout_gravity——当前View,本身,在父一级的控件所分配的显示范围内的,对齐方式常用在: 当前控件(在父一级LineLayout所分配给其的显示范围内)的对齐方式需要注意的是,如果TableRow的gravity确…

Linux_arm_启动_c语言部分详解,[原创]Linux arm 启动 c语言部分详解第四讲

Linux arm启动c语言部分详解第四讲(from setup_per_cpu_areas();)Written by leeming上面的setup_arch花了我们大量的篇幅,现在我们要继续往前推进了。注:黑色为主线,蓝色为函数的一级展开,红色是注意重要的地方。//因为我们没有定…

Kudu1.1.0 、 Kudu1.2.0 Kudu1.3.0的版本信息异同比较

不多说,直接上干货! Kudu1.1.0 新特性 python API升级,具备JAVA Cclient一样的功能(从0.3版本直接升级到1.1),主要的点如下: 1.1. 改进了Parial Row的语义 1.2. 增加了range partition支持 1.3.…

ASP.NET Web API 中 特性路由(Attribute Routing) 的重名问题

刚才忘了说了,在控制器名重名的情况下,特性路由是不生效的。不然的话就可以利用特性路由解决同名的问题了。 而且这种不生效是真的不生效,不会提示任何错误,重名或者什么的,直接会报告404,所以也是个坑。转…

Python3爬取网页信息乱码怎么解决?(更新:已解决)

更新:乱码问题已经解决了。 将下面代码中的红色部分改为下面这样就不会出现个别职位信息乱码的情况了。 soup2 BeautifulSoup(wbdata2, html.parser,from_encoding"GBK") 另外: 建立了一个微信公众号,主要分享软件视频教程、文档笔…

洗衣机洗涤部分c语言程序,51单片机洗衣机控制板及C语言程序

51单片机洗衣机控制板及C语言程序,该控制板单片机采用AT89C51单片机,所设计全自动洗衣机功能有:标准洗衣、经济洗衣、单独洗衣以及排水四种洗衣等四种方式,有强洗、弱洗及运行/暂停、显示及报警功能,程序利用利用Protues仿真软件观…

数据存储

一、NSCoding &#xff1a; 使用NSCoding需要遵守<NSCoding> 保存&#xff1a; /** * 将某个对象写入文件时会调用 * 在这个方法中说清楚哪些属性需要存储 */ MJStudent.m - (void)encodeWithCoder:(NSCoder *)encoder { [encoder encodeObject:self.no forKey:"…

犯人释放的C语言程序,C语言的自动关机程序和一个用来整人的小程序

可以用C语言中的system()函数来实现系统的自动关机程序&#xff0c;可以设置多长时间后将自动关机。当然马上关机也是可以的&#xff0c;我们就可以恶搞别人计算机了(你事先得知道怎么解)&#xff0c;将写好的自动关机程序复制到别人电脑&#xff0c;然后将可执行的文件设为开机…

[mysql] linux下使用yum安装mysql

From: http://www.2cto.com/database/201207/141878.html linux下使用yum安装mysql1、安装查看有没有安装过&#xff1a;yum list installed mysql*rpm -qa | grep mysql*查看有没有安装包&#xff1a;yum list mysql*安装mysql客户端&#xff1a;yum install mysql安装mysql 服…

图解MapReduceMapReduce整体流程图

1.图解MapReduceMapReduce整体流程图 并行读取文本中的内容&#xff0c;然后进行MapReduce操作 Map过程&#xff1a;并行读取三行&#xff0c;对读取的单词进行map操作&#xff0c;每个词都以<key,value>形式生成 reduce操作是对map的结果进行排序&#xff0c;合并&#…