CSS3 中有三种定位机制 : 普通文档流 (text)| 浮动(float) | 定位(position)
普通文档流
就是CSS中默认的文本文档
普通流中，元素位置由文档顺序和元素性质决定，块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin值计算得到，行内元素在一行中水平布置
浮动
- 所有主流浏览器都支持 float 属性，给元素设置 float 样式 ,元素会脱离文档流 ,浮动的元素可以左右移动，直到他的外边框边缘碰到包含自己的框或者另一个浮动框的边缘。
- CSS 中，任何元素都可以浮动，浮动元素会生成一个块级框，而不论它本身是何种元素,行内元素和行内块元素会围绕浮动框排列，块元素会被覆盖。
- 在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
- 他可取三个值:
| eft | 元素向左浮动。 |
| right | 元素向右浮动。 |
| none | 默认值。元素不浮动，并会显示在其在文本中出现的位置。 |
案列：
div{ float: left; /* 左浮动 */ ?}
定位
- 所有主流浏览器都支持 position 属性，给元素设置position属性可以规定元素的定位类型。
- 任何元素都可以定位。除静态定位以外,元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
- 他可取四个值:
| absolute | 绝对定位，相对于 static 定位以外的第一个父元素进行定位。 (子绝父相 :绝对定位相对于父元素设置了除静态定位以外而定位,如果父级没有设置定位他会一层层向上寻找有定位的祖级 直到body元素) |
| fixed | 绝对定位，相对于浏览器窗口进行定位。 |
| relative | 相对定位，相对定位看作普通流的一部分，移动后的元素仍占据原来的位置，移动元素会导致他覆盖其他的框。 |
| static | 默认值。没有定位。 |
子绝父相 案例
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style> ???????.father { ???????????position: relative; /*相对定位*/ ???????????width: 400px; ???????????height: 400px; ???????????background: yellow; ???????????margin: 200px auto; ???????} ???????.son { ???????????position: absolute; ?/*绝对定位*/ ???????????width: 100px; ???????????height: 100px; ???????????left: 50%; ???????????top: 50%; ???????????margin-left: -50px; ???????????margin-top: -50px; ???????????background: skyblue; ???????} ???</style></head><body> ???<div class="father"> 父盒子 ???????<div class="son">子盒子</div> ???</div></body></html>
CSS中的定位机制
原文地址：https://www.cnblogs.com/gaoguowen/p/8536287.html