zoukankan      html  css  js  c++  java
  • 关于浮动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已经完全放弃了自己的所有一切,成为了天空的一朵云彩。

  • 相关阅读:
    ORACLE SEQUENCE 介绍
    cocos2d 游戏开发:Cocos2d v3 "hello world"+显示飞船
    无线网络覆盖
    解决xShell4某些情况下按删除键会输出^H的问题
    Android开发经验之—intent传递大数据
    简单的REST的框架实现
    ListView 使用方法(Asp.Net)
    POJ2528 Mayor's posters 【线段树】+【成段更新】+【离散化】
    C#反射Assembly 具体说明
    HDU 4432 Sum of divisors (进制模拟)
  • 原文地址:https://www.cnblogs.com/Arther-J/p/5380085.html
Copyright © 2011-2022 走看看