float 与 absolute\relative定位的区别

标签：otto   question   oat   zhang   hang   blog   padding   back   www   

示例代码参考地址：http://codepen.io/CodingMonkeyzh/pen/OVxGKL

总结参考地址：https://segmentfault.com/q/1010000002924699

在给元素定位的时候，float 和 absolute 定位都有可能会用到，以前没注意，最近发现了点奇怪的东西，所以过来总结一下：

float 与 absolute\relative定位

相同之处：

两者都会使元素脱离文档流，其他的盒子（仅仅是盒子，不包括盒子里面的文本！！）都会无视被定位元素的存在。

不同之处：

使用 float 定位的元素，其他的盒子虽然会无视它的存在，但是其他盒子里的文本会看到这个元素的存在，并且给他让出位置！案例见此：https://www.zhihu.com/question/24529373 张秋怡 的回答；即：float 的元素还会在文档流上占据一个位置！

使用 absolute\relative 定位的元素，其他的盒子会无视它的存在，而且其他盒子里的文本也会无视它的存在，案例也可以见这里：https://www.zhihu.com/question/24529373 张秋怡 的回答；即：absolute的元素已经完全脱离文档流，文字可以无视它的存在。

示例：

body:

<div class="c1">

        float

    </div>
    <p>

        我是一段占位文字。。。我是一段占位文字。。。我是一段占位文字。。。我是一段占位文

    </p>
  
    <div class="c2">

        absolute

    </div>
    <p>

        我是一段占位文字。。。我是一段占位文字。。。我是一段占位文字。。。我是一段占位文字。。。我是一段占位文字。。。我是一段占位文字。。。我是一段占位文字。。

    </p>

css:

.c1, .c2 {
  width: 200px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
p {
  height: 100px;
  width: 400px;
}
.c1 {
  float: left;
  background: orange;
}

.c2 {
  position: absolute;
  background: green;
  left: 8px;
  top: 100px;
}

效果如图：

右侧 p 盒子无视了左侧的 float 元素，盒子插入，但是文字没有插入，文字看到了 float 的盒子；float 的元素还会在文档流上占据一个位置！

右侧 p 盒子无视了左侧的 absolute 元素，盒子插入，文字也插入，文字无视了 float 的盒子；absolute 的元素不会在文档流上占据一个位置！

float 与 absolute\relative定位的区别

标签：otto   question   oat   zhang   hang   blog   padding   back   www   

原文地址：http://www.cnblogs.com/jimmy-smith/p/6719239.html