一、浮动
（1）概述
浮动是所有网站页面布局必备的 可以将块儿级标签浮动起来脱离正常的文档流。
- 浮动是多个块儿级标签可以在一行显示(全部飘在了空中)
- 浮动的元素，没有块儿级一说，本身有多大浮起来之后也就只能占多大。
- 只要涉及到页面的布局，一般都是用浮动提前规划好
主要属性值为：left（左浮动）、none（不浮动）、right（右浮动）、inherit（继承父元素浮动），多用于网页排版。
| 属性值 | 描述 |
|---|---|
| left | 元素向左浮动。 |
| right | 元素向右浮动。 |
| none | 默认值。元素不浮动，并会显示在其在文本中出现的位置。 |
原理：使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘
（2）浮动示例
- 内部元素因为浮动导致了外边框无法框柱内部元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
height: 200px;
width: 200px;
background-color: red;
float: left; /*浮动 浮到空中往左边飘*/
}
#d2 {
height: 200px;
width: 200px;
background-color: yellow;
float: right; /*浮动 浮到空中往右边飘*/
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
（3）浮动造成的影响
主要是会造成父标签塌陷的问题。
浮动后的元素可以设置宽度和高度等，也就是说元素浮动后会变成块级元素，但我更倾向于说元素变成inline-block类型的元素，即同时拥有块级与行内元素的特征。
因为浮动元素脱离了普通流，会出现一种高度坍塌的现象：原来的父容器高度是当前元素A撑开的，但是当A元素浮动后，脱离普通流浮动起来，那父容器的高度就坍塌（前提是父容器高度小于A元素高度）。
（4）解决浮动带来的影响
方式一：自己加一个div设置高度
- 直接写div然后写对应的长宽
- 内部再创建一个子标签，给一个固定高度，撑起外边框
#d4 {
height: 100px;
}
- 造成代码冗余，不推荐使用
方式二：利用clear属性
- 写div然后添加clear属性 避免去查找长宽
#d4 {
clear: left; /*该标签的左边(地面和空中)不能有浮动的元素，有的话会一直往下，直到没有*/
}
方式三：通用的解决浮动带来的影响方法(推荐使用)
- 在写HTML页面之前，先提前写好处理浮动带来的影响。
- css代码：
.clearfix:after{
content: '';
display: block;
clear: both;
}
- 前端：
之后只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可
<div id="d1" class="clearfix">
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</div>
- 上述的解决方式是通用的，到哪都一样，并且名字就叫clearfix，强烈推荐使用
二、定位方式
（1）定位方式介绍
-
静态
- 所有的标签默认都是静态的(static)，无法改变位置
- 通过
positon: static;指定，没有边偏移属性
-
相对定位 Relative Positioning (了解)
- 相对于标签原来的位置做移动(relative)
-
绝对定位 Absolute Positioning (常用)
- 相对于已经定位过的父标签做移动(如果没有父标签，那么就以body为参照)
- 当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签做定位的时候，使用绝对定位。
-
固定定位 Fixed Positioning (常用)
- 相对于浏览器窗口固定在某个位置(eg: 网站右侧的小广告)
ps：浏览器是优先展示文本内容的，如果它发现文本内容被挡住了，会想方设法的找个位置展示出来。
（2）静态定位
在 CSS 中，静态定位（Static positioning）是元素的默认定位方式。当你没有显式地设置任何定位属性时，元素会以静态定位的方式显示在页面上。
静态定位的元素遵循文档流，按照它们在 HTML 中出现的顺序进行排列。它们不受 top、right、bottom 和 left 属性的影响，也不会相对于任何其他元素进行定位。
.static-box {
/* 默认为静态定位 */
}
总结来说，静态定位是元素的默认定位方式，它们在页面中按照文档流的顺序排列，不会相对于其他元素进行定位。
（3）相对定位
在 CSS 中，相对定位（Relative positioning）是一种定位方式，它允许你将元素相对于其正常位置进行移动，但不会影响其他元素的位置。相对定位的元素仍会占据原来的空间，只是在视觉上移动了。
特点：
- 相对于之前的位置进行移动
- 移动后，原来的位置以标准流的方式继续占有
- 移动后的盒子压住其它盒子
.relative-box {
position: relative;
/* 相对定位 */
/* 标签由static变为relative，它的性质就从原来没有定位的标签变成了已经定位过的标签 */
/* 虽然你没有修改值，但是它的性质也已经改变了*/
top: 20px;
left: 30px;
}
在上面的示例中，.relative-box 类表示一个元素，设置了相对定位。通过 position: relative; 属性，该元素会相对于其原始位置向下移动 20 像素（top: 20px;）和向右移动 30 像素（left: 30px;）。
用途：
相对定位常用于微调元素的位置，使其相对于其正常位置进行微小调整，而不会影响其他元素的布局。相对定位的元素仍会占据其原始位置，因此在页面布局时需要注意周围元素的位置。
需要注意的是，相对定位不会改变元素在文档流中的位置，只是视觉上的移动。如果想要完全脱离文档流并进行绝对定位，可以考虑使用绝对定位（
position: absolute;）或固定定位（position: fixed;）属性。
（4）绝对定位
在 CSS 中，绝对定位（Absolute positioning）是一种常用的定位方式，它允许你将元素相对于其最近的已定位祖先元素进行定位，而不是相对于文档流。
特点：
- 移动盒子的时候，如果没有祖先盒子，或祖先盒子没有定位，则相对浏览器(非视口)的边线进行偏移
- 如果祖先盒子有定位(相对、绝对、固定)，则相对最近一级的祖先盒子边线进行偏移。所以通常给父盒子相对定位但不给偏移量，这样既不造成父盒子的移动，又可以使子盒子形成绝对定位
- 绝对定位的盒子不占有原来的位置，但会压住其它盒子
示例：
当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签做定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
#d3 {
height: 100px;
width: 200px;
background-color: blue;
position: relative; /* 从静态标签变为已经移动过的标签 */
}
#d4 {
height: 200px;
width: 400px;
background-color: yellow;
position: absolute; /* 绝对定位 */
left: 220px;
top: 110px;
}
</style>
</head>
<body>
<div id="d3">
<div id="d4"></div>
</div>
</body>
</html>
用途：
绝对定位的元素脱离了文档流，不再占据原始位置，因此周围元素会表现得好像该元素从页面中消失了一样。这种定位方式常用于创建浮动菜单、弹出框等需要脱离文档流的元素。
需要注意的是，绝对定位的元素会相对于其最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于文档的初始包含块（initial containing block）进行定位。
（5）固定定位
在 CSS 中，固定定位（Fixed positioning）是一种常用的定位方式，它允许你将元素相对于浏览器窗口进行定位，即无论用户如何滚动页面，该元素都会保持在固定的位置。
特点：
- 固定定位的盒子固定在浏览器视口的某个位置，压住其它盒子。浏览器上下滚动时，盒子的位置不变
- 边偏移是相对于视口的边线来移动
- 固定定位的盒子不占有原来的位置
- 固定定位的盒子需要有宽度
示例：
盒子固定在另一个盒子的右侧
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>test title</title>
<style>
.fix-box {
width: 100px;
height: 100px;
background-color: yellow;
position: fixed; /*写了fixed之后，定位就是根据浏览器窗口*/
/*盒子固定在另一个盒子的右侧*/
top: 100px;
left: 50%;
margin-left: 400px;
}
.median {
width: 800px;
height: 1000px;
background-color: red;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="fix-box"></div>
<div class="median"></div>
</body>
</html>
用途：
固定定位的元素会随着用户滚动页面而保持在固定位置，这种定位方式常用于创建固定的导航栏、广告条等需要始终可见的元素。
需要注意的是，固定定位的元素是相对于浏览器窗口定位的，因此不会随着页面的其余内容滚动而移动，而是始终固定在指定位置。
三、验证浮动和定位是否脱离文档流
脱离文档流：发生移动后是否还会占有原来的位置
（1）不脱离文档流
- 相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 200px;width: 300px; background-color: red;position: relative;left: 500px;"></div>
<div style="height: 200px;width: 300px; background-color: green"></div>
</body>
</html>
（2）脱离文档流
要验证浮动和定位是否脱离文档流，你可以创建一个包含浮动元素和定位元素的示例，并观察它们对文档流的影响。
在这个示例中，.float 类表示一个浮动元素，.absolute 类表示一个绝对定位的元素。
- 浮动
- 绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Floating and Positioning</title>
<style>
.float {
float: left;
width: 100px;
height: 100px;
background-color: red;
}
.absolute {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="float">Floating Element</div>
<div class="absolute">Absolute Positioning</div>
</body>
</html>
- 固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 200px;width: 300px; background-color: red;"></div>
<div style="height: 200px;width: 300px; background-color: green;position:fixed;bottom:20px;right: 30px;"></div>
<div style="height: 200px;width: 300px; background-color: blue;"></div>
</body>
</html>