欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

浮动、绝对定位脱离文档流的区别

程序员文章站 2024-01-28 21:45:16
...

所谓脱离文档流，即将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当没看到它，两者位置重叠都是可以的。这里，通过讲解浮动脱离文档流（float）和绝对定位脱离文档流（position:absolute）的区别，让大家对这一概念有更深的认识。

一、浮动脱离文档流

使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。 
我们先利用下面代码在普通流中看一下效果，方便对比：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#outofnormal {
    width: 200px;
    background-color: cyan;
    padding: 10px;
}
</style>
</head>

<body>
    <div id="outofnormal">
        Out of normal: 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi esse impedit autem praesentium magni culpa, amet corporis, veniam consequatur voluptates temporibus. Voluptates eius similique asperiores cupiditate fugit hic atque quisquam?
    </div>
    <h2>Normal Content</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum praesentium nam tempora beatae quis nobis laboriosam alias aliquid, tenetur exercitationem. Odio, aperiam, illo! Eveniet natus dignissimos architecto velit eligendi id!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem reprehenderit velit nam delectus distinctio at unde aliquid officia illo, tempore vitae et incidunt non, ut eos nesciunt quaerat. Enim, minus.</p>
</body>

</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

在普通流的效果如下： 
浮动、绝对定位脱离文档流的区别

然后给蓝色的盒子outofnormal加上左浮动：

#outofnormal {
    width: 200px;
    background-color: cyan;
    padding: 10px;
    float: left;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

显示结果如下：

浮动、绝对定位脱离文档流的区别

浮动之后，蓝色的div就脱离了文档流，跟在后面的h2和p的盒子都当做没看到这个div的样子去定位，所以他们都顶着浏览器左边和顶部的边框。但是有趣的是，h2和p里面的文本，却都看到了这个被float的div，在自己的盒子里往右推，飘到了蓝色div的边上。这就是float的特性，其他盒子看不见被float的元素，但是其他盒子里的文本看得见。

二、绝对定位脱离文档流

将float: left;改为position:absolute

#outofnormal {
    width: 200px;
    background-color: cyan;
    padding: 10px;
    position:absolute;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

显示结果如下：

浮动、绝对定位脱离文档流的区别

看到这里，有发现与浮动脱离文档流的不同之处吗？相信聪明的你已经发现了，设置了绝对定位后，不仅是旁边的其他盒子无视蓝色div的存在，连其他盒子里的文本也无视了蓝色div的存在，顶着左上边框定位！

三、总结

使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。 

而对于使用absolute :position脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

参考链接：http://www.zhihu.com/question/24529373/answer/29135021

上一篇： 北京石油化工学院成立人工智能研究院

下一篇： 央视影音播放不了世界杯怎么办 cbox央视影音无法播放解决方法教程

推荐阅读