CSS-浮动，定位

1. 浮动 (float)

CSS的定位机制有三种：普通流(标准流)，浮动和定位。

普通流就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的情况下绝对不会出现例外的情况叫普通流布局。

1.1 什么是浮动？

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;/* 定义浮动left ：元素向左浮动right ： 元素向右浮动none ：不浮动 默认*/float: left;color: white;text-align: center;line-height: 200px;font-size: 50px;}.a {background-color: blue;}.b {background-color: red;}.c {background-color: green;}</style>
</head>
<body><div class="a">div1</div><div class="b">div2</div><div class="c">div3</div>
</body>
</html>

页面显示

1.2 浮动特性

浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。

浮动首先创建包含块的概念。就是说，浮动的元素总是找离它最近的父级元素对齐。但是不会超出内边距的范围。

浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。

1. 一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。

2. 元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动。

2. 定位

元素的定位属性主要包括定位模式和边偏移两部分。

边偏移：

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

定位模式：

在CSS中，position属性用于定义元素的定位模式，其基本格式如下：

        选择器 {position: 属性值;}

position的属性常用值：

值	描述
static	自动定位（默认定位方式）
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

2.1 静态定位

所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档流中默认的位置。在静态定位下无法通过偏移属性来改变元素的位置。

2.2 相对定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 300px;height: 200px;}.bottom {background-color: blue;}.top {background-color: red;/* 设置相对定位相对定位，不脱标，占有原来的位置相对当前位置进行移动,可以使用偏移属性改变元素位置*/position: relative;/* 距左200，向右移动200 */left: 200px;/* 距上100，向下移动100 */top: 100px;}</style>
</head>
<body><div class="top"></div><div class="bottom"></div>
</body>
</html>

注意：1.相对定位可以通过偏移移动位置，但是原来所占有的位置，继续占有。

2.每次移动位时，是以自己的左上角为基点移动(相对于自己原来的位置)。

2.3 绝对定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width= , initial-scale=1.0"><title>Document</title><style>.sup {width: 300px;height: 300px;background-color: aqua;position: relative;}.sub {width: 50px;height: 50px;background-color: blue;/* 设置绝对定位 */position: absolute;/* 基于有定位的上级标签进行移动如果上级标签都没有定位，就基于浏览器移动绝对定位，脱标，不占有原来的位置*/left: 20px;top: 50px;}</style>
</head>
<body><div class="sup"><div class="sub"></div></div>
</body>
</html>

子绝父相

子级是绝对定位的话，父级要用相对定位。因为子级是绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方。父盒子布局时，需要占有位置，因此父亲只能是相对定位。

2.4 固定定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: aqua;/* 固定定位基于浏览器页面移动，脱标*/position: fixed;top: 50%;right: 5px;}</style>
</head>
<body><div></div>
</body>
</html>

注意：1.固定定位的元素跟父亲没有关系，只认浏览器。

2.固定定位完全脱标，不占有位置，不随滚动条滚动。

2.5 四种定位总结

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置基准
静态static	不脱标，正常模式	不可以	正常模式
相对定位relative	不脱标，占有位置	可以	相对自身位置移动（自恋型）
绝对定位absolute	完全脱标，不占有位置	可以	相对于定位父级移动位置（拼爹型）
固定定位fixed	完全脱标，不占有位置	可以	相对于浏览器移动位置（认死理型）