CSS固定定位页会脱离文档流。那么常用的CSS让元素脱离标准本文档流的方法有哪些？下面本篇文章就来给大家介绍一下，希望对大家有所帮助。
CSS的三种手段让元素脱离标准本文档流——浮动、绝对定位、固定定位
浮动
浮动是CSS中用到的最多的一个选项，他有三个性质。关于浮动我们要强调一点，永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。
浮动元素脱离标准文档流
大概描述：有两个盒子，一个盒子浮动，一个盒子不浮动。浮动的盒子会脱离标准文档流，不浮动的盒子会在标准文档流中成为第一个，所以两者出现覆盖现象。
大概描述：一个行内标签在标准文档流中是不能设置宽高的，但是使用float使其脱离文档流之后，就可以对其设置宽高了。所有浮动的标签不会去区分行内标签和块级标签。也就是说： 一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。
浮动的元素互相贴靠
以float向左浮动为例：
如果有足够空间，那么就会靠着2哥。如果没有足够的空间，那么会靠着1号大哥。
如果没有足够的空间靠着1号大哥，自己去贴左墙。
浮动元素有“自围”的效果
自围效果就是：浮动的盒子可以遮盖文档标准流的第一个盒子，但是不会遮盖里面的文字，文字会围绕浮动的盒子显示。
在CSS代码中让div浮动，p不浮动，那么p中的文字就睡形成这种自围效果。
<div>
<img src="images/1.jpg" alt="" />
</div>
<p>
123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</p>
收缩现象
一个浮动元素如果没有给其设置宽高，则其大小收缩为文字的宽高。
绝对定位
绝对定位最大的用处就是制作页面中的压盖效果。
绝对定位使用的参考点是页面的角。绝对定位脱离标准文档物流即脱标。
position:absolute;
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#outofnormal {
width: 200px;
background-color: cyan;
padding: 10px;
position: absolute;
}
</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>
效果图：
固定定位
解释：就是相对浏览器定位，无论页面怎么滚动，他都不会变化。
用途：①固定导航栏②返回顶部
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#outofnormal {
width: 200px;
background-color: cyan;
padding: 10px;
position: fixed;
top: 100px;
}
</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>
效果图：
