定位有：普通流定位 、浮动定位 、相对定位 、 绝对定位 、 固定定位
特点
普通定位：被称为文档流定位，是页面元素默认的定位方式（块级：从上到下，独占一行；行级：从左到右，不独占一行）
浮动定位：
1.浮动元素脱离文档流，未浮动元素上前补位
2.浮动元素会停靠在父级元素的左边或者右边，亦或者紧跟其他元素边缘
3.浮动元素只会在当前行内
4.浮动只在父级元素内
5.多个块级元素处于一行
浮动引发的效果
当父元素的width显示不下所有浮动元素时，最后一个元素换行，元素浮动起来，对行内元素影响最大
文本、行内元素、行内块元素，采用文字环绕的方式排列，是不会被浮动元素压在底下，会巧妙避开浮动元素
清除浮动（只有三个值）
clear：left；right，both
浮动元素对父级元素的影响
原因：如果父级元素的hight没有设置或者没设置自适应，当部分元素全部浮动起来，父级hight为0
解决方法
1>.直接给父级设置px高
弊端：需要准确的px高
2>.设置父级浮动
弊端：对后继元素有影响
3>.为父级设置overflow:hidden
弊端：如果子集内容有溢出显示，会被一同隐藏
4>.父元素追加空元素 设置clear清楚浮动
position定位
1、static 默认定位
2、relative 相对定位 ：原位置保留， 原来位置左上角进行偏移
使用场合：元素位置的微调
3、absolute 绝对定位： 脱离文档流，相对于body进行位置偏移
注意：我们一旦设置绝对定位后，元素就具有漂浮效果
4、fixed 固定定位 ： 脱离文档流，不受滚动条影响，body标签左上角进行位置偏移
5、relative和absolute的结合使用：在偏移的父元素内添加相对定位，在该元素内添加绝对定位
使用场合
多个块级元素在一行内显示，浮动
元素实现自身位置的微调，相对定位
实现弹出内容和排版时，绝对定位和相对定位的结合
顶部固定 左边导航固定 广告，固定定位
原文：https://www.cnblogs.com/zycs/p/12085006.html