浮动
CSS浮动（Float）是一种布局技术，用于控制元素在页面中的位置。通过将元素浮动到其容器的左侧或右侧，可以使其他元素环绕在其周围。
相关属性：
float：用于设置元素的浮动方向。可以设置为
left（左浮动）或right（右浮动）。clear：用于控制元素周围的浮动元素对其的影响。可以设置为
left（清除左浮动）、right（清除右浮动）、both（清除左右浮动）或none（不清除浮动）。clearfix：当父元素包含浮动元素时，可以使用
clearfix技术来清除浮动。这可以通过在父元素上应用clearfix类来实现，例如：
.clearfix::after {
content: "";
display: table;
clear: both;
}
注意：
- 浮动元素会脱离正常的文档流，其他元素会环绕在其周围。
- 浮动元素的宽度默认会根据其内容自动调整，除非显式设置了宽度。
- 浮动元素会影响其容器的高度计算，容器可能会塌陷（高度为0）。
- 浮动元素之间可能会发生重叠，需要适当处理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动学习</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
既然我们可以定义浮动位置，那么我们也可以清除浮动
清除浮动是为了解决浮动元素对其容器造成的高度塌陷和布局问题。以下是一些常用的清除浮动的方法：
- 使用clear属性：在浮动元素的容器中添加一个空的块级元素，并为其应用clear: both;样式。这会使该元素出现在浮动元素的下方，从而清除浮动。例如：
<div class="clearfix">
<div class="float-left">浮动元素1</div>
<div class="float-left">浮动元素2</div>
<div class="clear"></div>
</div>
.clearfix::after {
content: "";
display: table;
clear: both;
}
- 使用overflow属性：在浮动元素的容器上应用overflow: hidden;或overflow: auto;样式。这会创建一个新的块级格式化上下文（BFC），从而清除浮动。例如：
.container {
overflow: hidden;
}
- 使用伪元素：在浮动元素的容器中使用伪元素来清除浮动。这是一种常见的clearfix技术。例如：
.clearfix::after {
content: "";
display: table;
clear: both;
}
示例
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清除浮动</title>
<style>
.box {
background-color: violet;
/* overflow清除浮动 */
overflow: hidden;
}
/* 伪元素清除浮动 */
/* .box::after {
clear: both;
content: '';
display: block;
visibility: hidden;
} */
.box>div {
width: 200px;
height: 100px;
float: left;
background-color: black;
}
</style>
</head>
<body>
<div class="box">
<div></div>
<!-- <div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div> -->
</div>
<!-- <div style="width: 1000px;height: 100px;background-color: blue;"></div> -->
</body>
</html>
定位
CSS定位是一种用于控制元素在页面中精确位置的技术。CSS提供了多种定位属性，包括相对定位（relative）、绝对定位（absolute）、固定定位（fixed）和粘性定位（sticky）。
相对定位（relative）：通过设置
position: relative;可以将元素相对于其正常位置进行偏移。使用top、right、bottom和left属性可以控制元素相对于其原始位置的偏移量。绝对定位（absolute）：通过设置
position: absolute;可以将元素相对于其最近的已定位祖先元素进行定位。如果没有已定位的祖先元素，则相对于文档的初始包含块进行定位。使用top、right、bottom和left属性可以控制元素相对于其定位参考点的偏移量。固定定位（fixed）：通过设置
position: fixed;可以将元素相对于视口进行定位，即无论页面滚动与否，元素都会保持在固定位置。使用top、right、bottom和left属性可以控制元素相对于视口的偏移量。粘性定位（sticky）：通过设置
position: sticky;可以将元素在滚动到特定位置时固定在屏幕上。使用top、right、bottom和left属性可以控制元素相对于其父元素或视口的偏移量。
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绝对定位</title>
<style>
/* 在没有父元素或者父元素没有定位的情况下 以浏览器为标准定位
关键字：absolute
*/
* {
margin: 0;
padding: 0;
}
.father {
width: 500px;
height: 500px;
background-color: pink;
position: absolute;
}
.son {
position: absolute;
width: 100px;
top: 100px;
right: 10px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
</html> -->
<!DOCTYPE html>
<html>
<head>
<title>CSS定位示例</title>
<style>
.relative {
position: relative;
top: 20px;
left: 20px;
background-color: yellow;
}
.absolute {
position: absolute;
top: 50px;
right: 50px;
background-color: red;
}
.fixed {
position: fixed;
bottom: 20px;
right: 20px;
background-color: blue;
}
.sticky {
position: sticky;
top: 100px;
background-color: green;
}
.container {
height: 2000px;
}
</style>
</head>
<body>
<div class="container">
<div class="relative">相对定位</div>
<div class="absolute">绝对定位</div>
<div class="fixed">固定定位</div>
<div class="sticky">粘性定位</div>
</div>
</body>
</html>
![LeetCode_从数量最多的堆取走礼物[2558]](https://img-blog.csdnimg.cn/direct/f18be929b56846d4a4518607389456c2.png)
![[工具] 批量BMP图片转为PNG透明图片，去掉BMP黑色背景，去黑底，压缩导出png图片V1.1](https://img-blog.csdnimg.cn/img_convert/82ad2df8d31c6439cca570f49a9b2601.jpeg)
