最近返回头看了很多书籍,一直在纠结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已经完全放弃了自己的所有一切,成为了天空的一朵云彩。

关于浮动float属性和position:absolute属性的区别的更多相关文章

  1. 关于css float 属性以及position:absolute 的区别。

    1.float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.div一个典型的块 ...

  2. 【总结】我所整理的float, inline-block还有position:absolute

    这篇主要写了一下几个知识点: 浮动和inline-block的概念和选择 浮动和position:absolute对于脱离文档流的区别 这篇文章参考了一下几个链接: https://www.zhihu ...

  3. CSS 浮动(float)与定位(position)

    一.浮动 1.三个属性:left.right.none. 2.特点:容易造成父项塌陷,故在父项需要清除浮动 3.父项塌陷现象 4.父项塌陷解决方案(建议使用):清除浮动 .parent:after{ ...

  4. 详细分析css float 属性以及position:absolute 的区别

    1.float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.div一个典型的块 ...

  5. absolute属性与IE6/IE7之间的误会

    三.absolute属性与IE6/IE7之间的误会 absolute属性确实存在不少兼容性的问题,首先absolute属性定位相关(left/top)的些bug(例如IE6的奇偶bug)这里不予以讨论 ...

  6. CSS position:absolute浅析

    一.绝对定位的特征 绝对定位有着与浮动一样的特性,即包裹性和破坏性. 就破坏性而言,浮动仅仅破坏了元素的高度,保留了元素的宽度:而绝对定位的元素高度和宽度都没有了. 请看下面代码: <!DOCT ...

  7. global,$GLOBALS[&#39; &#39;] 全局, 浮动float跟margin的注意事项

    $a; global只能声明变量为全局,不能赋值,否则报错未定义:global $a; 相对于$GLOBALS['a'],写法是这样的,所有定义过的变量都存在这里: //浮动float跟margin的 ...

  8. 绝对定位常见误区:position:absolute相对于谁定位、及当溢出时怎么隐藏

    1.绝对定位元素溢出父元素,怎么隐藏问题? 通常,为了让DIV子元素超出部分隐藏,都是在父元素设置overflow:hidden,这样即可防止子元素撑开父元素,使子元素能够溢出隐藏! 但是,对于pos ...

  9. 【总结整理】行内标签span设置position:absolute/float属性可以设置宽度与高度

    postion:absolute 跳出文本流,不是行内元素,设置宽高有效,我的理解. 引用下曹刘阳写的<编写高质量代码-web前端开发修炼之道>一书中看到的一句话:position:abs ...

随机推荐

  1. sql脚本多服务器操作

    --创建链接服务器exec sp_addlinkedserver 'srv_lnk','','SQLOLEDB','IP' exec sp_addlinkedsrvlogin 'srv_lnk','f ...

  2. mina学习(一)

    Mina:是一个帮助用户开发高性能和高伸缩性网络应用程序的框架 学习地址链接:http://www.cnblogs.com/xuekyo/archive/2013/03/06/2945826.html ...

  3. python 读写 Excel文件

    最近用python处理一个小项目,其中涉及到对excel的读写操作,通过查资料及实践做了一下总结,以便以后用. python读写excel文件要用到两个库:xlrd和xlwt,首先下载安装这两个库. ...

  4. EntityFramework-DBFirst-重新生成后写的验证消失(解决办法)

    1.这是EF生成的类: namespace PMS.DataProvider.EntityFramework { using System; using System.Collections.Gene ...

  5. SqlHelper模板

    在实际开发中,我们不会直接使用拼写SQL语句的方法进行数据库操作,而是使用参数化的方法进行数据库操作,这样做的好处很多,不仅提高了程序的健壮性,同时也避免的SQL注入的问题.在这里,笔者为初学者提供一 ...

  6. Date、Calendar、DateFormat类

    Date类与Calendar类之间的转换 package date; import java.util.Calendar; import java.util.Date; public class Da ...

  7. POJ-1129 Channel Allocation (DFS)

    Description When a radio station is broadcasting over a very large area, repeaters are used to retra ...

  8. BZOJ 4517--[Sdoi2016]排列计数(乘法逆元)

    4517: [Sdoi2016]排列计数 Time Limit: 60 Sec  Memory Limit: 128 MBSubmit: 1727  Solved: 1067 Description ...

  9. window.name实现跨域

    在 http://www.cnblogs.com/zhuzhenwei918/p/6759459.html 这篇文章中,我提到了几种跨域的方式,这里主要讲解使用window.name实现跨域. 跨域就 ...

  10. 图书管理系统 基于form组件

    models: from django.db import models # Create your models here. class Book(models.Model): name = mod ...