absolute float 比较分析

同一:absolute-float 都脱离了文档流,也就是默认情况下,父盒子计算高度不包括 absolute/float 的元素

下例:

两个 parentDiv,背景色:深海蓝;边框:1px红色实线;父盒子里面各包含一个 sonDiv ;

第一个 sonDiv 绝对定位,第二个 sonDiv 浮动定位;

两个 parentDiv 都有 margin-bottom: 20px; 方便观察,避免互相干扰;

示例：

代码：

<div style="margin-bottom: 20px;">

    <div style="position: absolute;">sonDiv1-absolute</div>

</div>

<div style="margin-bottom: 20px;">

    <div style="float: left;">sonDiv2-float</div>

</div>

结论:absolute-float 元素都脱离了文档流,且默认情况下,父盒子计算高度不包括 absolute/float 的元素(如果父盒子里有非absolute-float元素的话,父盒子自然会计算非absolute-float元素的高度)

同二: absolute-float 使元素宽高自适应

示例：

代码：

<div style="position: absolute;border: 1px solid red;">sonDiv1-absolute</div>

<div style="float: left;margin-top:25px;border: 1px solid red;">sonDiv2-float</div>

<div style="margin-top:50px;border: 1px solid red;">sonDiv3-normal</div>

大家可以看到,三个盒子都没有设置宽度,前面两个 absolute/float 盒子 div 宽度自动等于内容宽度了,而第三个普通的 div 就是独占一行,典型的块级元素特征;

结论:absolute-float 使元素宽高自适应

异一:脱离文档流不同

脱离文档流的区别1: absolute 的元素好像没有办法让 parentDiv 计算他的高度,不过float可以,只要给 float 元素的 parentDiv 加上 overflow:hidden 就行;

给他们的 parentDiv 都加上 overflow:hidden

示例：

代码：

<div style="overflow: hidden;margin-bottom: 20px;">

    <div style="position: absolute;">sonDiv1-absolute</div>

</div>

<div style="overflow: hidden;margin-bottom: 20px;">

    <div style="float: left;">sonDiv2-float</div>

</div>

结论:通过给 float 元素的 parentDiv 设置 overflow:hidden ,可以让父元素把 sonDiv 的高度计算在内,但是 absolute 不行

脱离文档流的区别2:

(1) absolute 脱离了文档流,后面的普通盒子会忽视他,而且还会忽视他里面的内容(在这里就是后面的普通元素会忽略 absolute 的 div ,也会忽略 div 里面的文字)

方便示例,咱们把两个第一个 parentDiv 的 margin-bottom: 20px; 去掉,第二个 sonDiv 的 float 也去掉, parentDiv 的 overflow 也去掉;

示例：

代码：

<div style="overflow: hidden;">

    <div style="position: absolute;">sonDiv1-absolute</div>

</div>

<div style="overflow: none;margin-bottom: 20px;">

    <div style="float: none;">sonDiv2-float:none</div>

</div>

结论: absolute 脱离了文档流,后面的普通盒子会忽视他,而且还会忽视他里面的内容

补充: absolute 脱离了文档流,后面的浮动盒子也会忽视他,而且还会忽视他里面的内容;当然后面的盒子如果也是 absolute 的,当然就不会忽视了,这个很好理解,同级嘛,不解释

示例:给第二个盒子设置 float , parentDiv 加上 overflow ;后面再加一个盒子, sonDiv3 设置 absolute

示例：

代码：

<div style="overflow: hidden;">

    <div style="position: absolute;">sonDiv1-absolute</div>

</div>

<div style="overflow: hidden;">

    <div style="float: left;">sonDiv2-float:left</div>

</div>

<div style="overflow: hidden;margin-bottom: 20px;">

    <div style="position: absolute;">sonDiv3-absolute</div>

</div>

结论: absolute 脱离了文档流,后面的普通､浮动盒子都会忽视他,而且还会忽视他里面的内容,只有同级的 absolute 元素不会忽略他

(2) float 元素脱离了文档流且他的父盒子没有设置 overflow: hidden; ,后面的普通盒子会忽视他,但不会忽视他里面的内容(在这里就是后面的普通元素会忽略 float 的 div ,但是不会忽略 div 里面的文字)

示例：

代码：

<div style="overflow: none;">

    <div style="float: left;">sonDiv2-float:left</div>

</div>

<div style="margin-bottom: 20px;">

    <div style="position: none;">sonDiv1-absolute-none</div>

</div>

你看,这里普通盒子 sonDiv1 就忽视了 float 的 sonDiv2 的盒子(因为他自身 float ,且他的父盒子没有设置 overflow: hidden; ),但是呢,很明显 sonDiv1 盒子里的文字看到了 float 的 sonDiv2 盒子里的内容,所以没有直接盖过去,反而让出了位置｡｡｡

仔细分析的话,这里其实出现了4处变化!

1. sonDiv2 的 parentDiv 由于 sonDiv2 的 float:left 出现了坍缩,忽略了sonDiv2 的盒子和内容,所以 sonDiv2 的 parentDiv 只剩下了两根1px的红色边框,背景色自然也看不见了;
2.由于上面的盒子 sonDiv2 的 float:left ,导致后面的普通元素, sonDiv1 和他的 parentDiv 就忽略了这个盒子的存在,直接顶上去了,顶到 sonDiv2 的 parentDiv (也就是2px的红色边框),那么这里 sonDiv1 的 parentDiv 边框是1px红色,加上前面的 2px ,所以导致最上面有 3px 的红色边框啦;
3.同时 sonDiv1 和他的 parentDiv 的整体上移( sonDiv1 的 parentDiv 的背景色当然一起上移啦),给 sonDiv2 的 parentDiv 造成了有背景色的假象!其实这个背景色是 sonDiv1 的 parentDiv 的!
4.按道理呢, sonDiv1 的文字也是一起上移的,可是呢, sonDiv1 的文字也就是内容,看到了上面 float:left 盒子 sonDiv2 的内容!!!所以他就没有盖上去,而是自觉的让出了位置,跟在前面内容的后面了!!!
可能大家也注意到了, sonDiv2 的文字要比 sonDiv1 的高一点点,这就是 1px 的边框哦,因为 sonDiv2 顶着他 parentDiv 的 2px 边框,而 sonDiv1 顶着 3px 的边框哦(不明白,请看第2条)

那么如果给 float 元素的 parentDiv 加上 overflow: hidden; 呢?自然就变正常啦, parentDiv 被撑起来,后面的普通盒子也能正常看到, float 元素的 parentDiv 啦

示例：

代码：

<div style="overflow: hidden;">

    <div style="float: left;">sonDiv2-float:left</div>

</div>

<div style="margin-bottom: 20px;">

    <div style="position: none;">sonDiv1-absolute-none</div>

</div>

结论: float 元素脱离了文档流且父盒子没有设置 overflow: hidden; ,后面的普通盒子会忽视他,但不会忽视他里面的内容;如果他的父盒子设置 overflow: hidden;,那么后面的普通盒子就不会忽视他,注意此时设置了 overflow: hidden; 的父盒子也会变成高度自适应哦(宽度好像也是, float 元素有多宽高,父盒子就被撑多宽高)~

咱们继续引申下去,float 元素,如果他的父盒子没有设置 overflow: hidden; ,且后面跟着的不是普通盒子,而是 absolute 盒子,情况会怎么样呢?

示例:

代码：

<div style="overflow: none;">

    <div style="float: left;">sonDiv2-float:left</div>

</div>

<div style="margin-bottom: 20px;">

    <div style="position: absolute;">sonDiv1-absolute-none</div>

</div>

结论: float 元素脱离了文档流且父盒子没有设置 overflow: hidden; ,后面的 absolute 盒子会忽视他这个盒子,而且会忽视他里面的内容(在这里就是后面的 absolute 元素会忽略 float 元素的 div 和里面的文字,直接盖上去!!!)

那么如果给 float 元素的 parentDiv 设置 overflow:hidden; 呢?咱们来试试!

示例：

代码：

<div style="overflow: hidden;">

    <div style="float: left;">sonDiv2-float:left</div>

</div>

<div style="margin-bottom: 20px;">

    <div style="position: absolute;">sonDiv1-absolute-none</div>

</div>

这下恢复正常啊,与后面跟着普通盒子无差,当然后面盒子的背景色没了,这个 absolute 盒子自身的问题;

结论:float 元素脱离了文档流且父盒子没有设置 overflow: hidden; 后面的普通盒子会忽视他,但不会忽视他里面的内容; absolute 盒子则会忽视盒子和内容; float 元素脱离了文档流且父盒子设置了 overflow: hidden; 则后面的普通盒子和 absolute 盒子都会看到 float 元素父盒子的存在

对了,这里还没说如果后面的元素是 float 元素呢,,,不过这个应该简单,同级的嘛,即使 float 元素脱离了文档流且父盒子没有设置 overflow: hidden;,后面的 float 元素也会看到的,且条件允许的话,会和前面的 float 元素共处一行哦

示例：

代码：

<div style="overflow: none;">

    <div style="float: left;">sonDiv2-float:left</div>

</div>

<div style="margin-bottom: 20px;">

    <div style="float: left;border:1px solid green">sonDiv1-absolute-none</div>

</div>

都是 float 元素,同级嘛,父元素都忽视了,所以就并排了(注意哦,后一个 float 元素看到了前一个 float 元素的盒子哦,不仅仅是只看见了内容哦,不信?我给后面一个 float 元素加了边框呐!你看后面一个 float 元素的边框并没有盖到第一个 float 元素去,而是顶在第一个 float 元素的边界),至于高度不一样,因为第一个盒子 sonDiv2 顶着父盒子坍缩导致的 2px 边框,而第二个盒子 sonDiv1 顶着2个父盒子坍缩导致的 4px 边框和自己的 1px 边框,所以高度自然不一样啦;那么我们再给第一个 float 元素的父盒子加上 overflow: hidden; 看看

示例：

代码：

<div style="overflow: hidden;">

    <div style="float: left;">sonDiv2-float:left</div>

</div>

<div style="margin-bottom: 20px;">

    <div style="float: left">sonDiv1-absolute-none</div>

</div>

又是挺正常的嘛,所以咱们来总结下:

结论:float 元素脱离了文档流且父盒子没有设置 overflow: hidden; 后面的普通盒子会忽视他,但不会忽视他里面的内容; absolute 盒子则会忽视盒子和内容; float 盒子则都不会忽视; float 元素脱离了文档流且父盒子设置了 overflow: hidden; 则后面的普通盒子､ absolute 盒子和 float 盒子都会看到 float 元素父盒子的存在

插播一句,position:fixed 跟 absolute 比较像,也脱离文档流,不过没细分析;但是 position:relative 好像并没有脱离文档流~~

最后把异同总结下: absolute/float 元素定位异同:

同1:absolute-float 都脱离了文档流,也就是默认情况下,父盒子计算高度不包括 absolute/float 的元素
同2:absolute-float 使元素宽高自适应
异1:脱离文档流的区别1: absolute 的元素好像没有办法让 parentDiv 计算他的高度,不过float可以,只要给 float 元素的 parentDiv 加上 overflow:hidden 就行;
异1:脱离文档流的区别2: absolute 脱离了文档流,后面的普通､浮动盒子都会忽视他,而且还会忽视他里面的内容,只有同级的 absolute 元素不会忽略他;float 元素脱离了文档流且父盒子没有设置 overflow: hidden; 后面的普通盒子会忽视他,但不会忽视他里面的内容; absolute 盒子则会忽视盒子和内容; float 盒子则都不会忽视; float 元素脱离了文档流且父盒子设置了 overflow: hidden; 则后面的普通盒子､ absolute 盒子和 float 盒子都会看到 float 元素父盒子的存在,且设置了 overflow: hidden; 的父盒子也会变成高度自适应(宽度好像也是, float 元素有多宽高,父盒子就被撑多宽高)~

行文仓促,如有错误,欢迎批评指正~~~