float和absolute的区别

float和absolute都会脱离文档流，那二者之间有哪些不同的地方呢？

脱离文档流，就是将该元素从普通的布局中拿出来,其他元素在定位的时候,会当脱离文档流的元素不存在而进行定位。

float

float浮动，当元素通过float来脱离文档流时，虽然其他的元素会当其不存在，但其他元素的内容还是会把这个元素占的位置让出来。也就是该元素浮动在另外一个有文字内容的元素上时，文字内容并不会被浮动的元素覆盖，而是环绕在周围。如：

<style>.float {width: 100px;height: 100px;float: left;background: blueviolet;}.text {width: 200px;height: 200px;background: lightskyblue;}
</style>
<div class="main"><div class="float"></div><div class="text">我是被覆盖的div</div>
</div>

紫色的div浮动到蓝色div上面，就会把蓝色div中的内容挤开。因此可以说float这种属于半脱离文档流。float也常常用来实现文字的环绕效果

absolute

absolute脱离文档流的时候，其他元素和元素中的文本都会无视掉他，因此不会像float那样将其他元素的内容挤到旁边去。如：

<style>.abso {width: 100px;height: 100px;position: absolute;opacity: 0.6;background: blueviolet;}.text {width: 200px;height: 200px;background: lightskyblue;}
</style>
<div class="main"><div class="abso"></div><div class="text">我是被覆盖的div</div>
</div>

这里为了更方便的查看，给使用的绝对定位的div设了一下透明度，可以看到蓝色的div中的文字没有发生位置改变，直接被上层的div覆盖了。

float和absolute的区别相关推荐

java定义float a = 1和float a = 1f什么区别？
java定义float a = 1和float a = 1f什么区别? PLANKTOLOGY | 浏览 6319 次推荐于2016-02-15 08:22:35 最佳答案 float a = 1; ...
float和real的区别
float和real的区别: float 和 real 数据类型被称为近似数据类型.float 和 real 的使用遵循有关近似数值数据类型的 IEEE 754 规范. 近似数值数据类型并不存储为许多 ...
float和double的区别
float和double的区别两者的主要区别如下: 1.在内存中占有的字节数不同单精度浮点数在机内存占4个字节双精度浮点数在机内存占8个字节 2.有效数字位数不同单精度浮点数有效数字8位双精 ...
relative和absolute的区别
这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在,而定位为absolute的层 ...
float、double(浮点数)区别还有和decimal(定点数)的比较
一.三者的区别介绍 float:浮点型,含字节数为4,32bit,数值范围为-3.4E38~3.4E38(7个有效位) double:双精度实型,含字节数为8,64bit数值范围-1.7E308~1. ...
float与double类型参数区别_8大基本数据类型及包装类，不知道这些点别说自己是大佬...
一般地,当需要使用数字的时候,我们通常使用内置数据类型,如:byte.int.long.double 等.然而,在实际开发过程中,我们经常会遇到需要使用对象,而不是内置数据类型的情形.为了解决这个问题 ...
JAVA中的float和double的区别
1.两个在定义时的区别 1)float型内存分配4个字节,占32位,范围从10^-38到10^38 和 -10^38到-10^-38 例float x=123.456f,y=2e20 ...
int,float与double的区别
整数类型和精度浮点类型 int是4字节,32比特. 它的4字节完全用于整型,就是只能显示1,2,3这样的数字,不能显示小数点后面的数字.数据范围为-2147483648~2147483647[-2^3 ...
CSS float和absolute
position:absolute 与float:left 有两大共性:包裹性,破坏性. 包裹性包裹性即让元素inline-block化,例如一个div标签默认宽度是100%显示的,但是使用了abs ...

float和absolute的区别

float

absolute

float和absolute的区别相关推荐

最新文章

热门文章