在网页设计的舞台上，我们常常需要元素自由灵活地漂浮在页面上，为用户呈现更富有动感的视觉体验。CSS3的浮动定位技术，就像一场舞蹈，可以让元素轻盈地在页面上舞动。本文将带你进入这个富有创意的领域，解锁浮动定位的神奇之处。
最本质的功能：用来实现并排
要浮动，并排的盒子都要设置浮动
父盒子要有足够的宽度，否则子盒子会掉下去
子盒子会按照顺序进行贴靠，如果没有足够空间，则会寻找再前一个兄弟元素
浮动的元素不再区分块级元素、行内元素，已经脱离了标准文档流，一律能够设置宽度和高度，即使它是span或者a标签等
注意事项
BFC (Box Formatting Context，块级格式化上下文) 是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
相对定位：盒子可以相对自己原来的位置进行位置调整，称为相对定位
位置描述词：
相对定位的性质：相对定位的元素，会在“老家留坑”本质上仍然是在原来的位置，只不过渲染在新的地方而已，渲染的图形可以比喻成“影子”，不会对页面其他元素产生任何影响
相对定位的用途：
绝对定位：盒子可以在浏览器中以坐标进行位置精准描述拥有自己的绝对位置
位置描述词：
绝对定位的盒子垂直居中是一个非常实用的技术
position：absolute;
top:50%;
margin-top: -自己高度一半
z-index属性是一个没有单位的正整数，数值大的能够压住数值小的
不管页面如何卷动，它永远固定在那里
position:fixed;
top:100px;
left:100px;
注意事项：
固定定位（position: fixed;）常常用于创建返回顶部按钮，这样用户可以轻松返回网页顶部。以下是一个简单的 HTML 和 CSS 示例，演示如何创建一个返回顶部按钮：
HTML 结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Scroll to Top Example</title>
</head>
<body>
<div class="content">
<!-- 页面内容 -->
<h1>Scroll down to see the button</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
<!-- 返回顶部按钮 -->
<div class="scroll-to-top">
<a href="#" id="scrollToTopButton">▲ Top</a>
</div>
<script src="script.js"></script>
</body>
</html>
CSS 样式（styles.css）：
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.content {
height: 1000px; /* 为了演示滚动效果而设置的高度 */
padding: 20px;
}
.scroll-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #007bff;
color: #fff;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
#scrollToTopButton {
text-decoration: none;
color: #fff;
}
JavaScript 脚本（script.js）：
document.addEventListener("DOMContentLoaded", function () {
// 获取返回顶部按钮
var scrollToTopButton = document.getElementById("scrollToTopButton");
// 添加点击事件监听器
scrollToTopButton.addEventListener("click", function (event) {
event.preventDefault(); // 阻止默认行为
// 平滑滚动到页面顶部
window.scrollTo({
top: 0,
behavior: "smooth"
});
});
// 监听页面滚动事件
window.addEventListener("scroll", function () {
// 如果页面滚动超过一定高度，显示返回顶部按钮；否则隐藏
if (window.scrollY > 200) {
scrollToTopButton.style.display = "block";
} else {
scrollToTopButton.style.display = "none";
}
});
});
这个示例中，.scroll-to-top 类定义了返回顶部按钮的样式，其中 position: fixed; 使按钮在页面滚动时保持固定在右下角。JavaScript 部分监听页面滚动事件，当滚动高度超过一定值时显示按钮，否则隐藏。点击按钮时，通过 JavaScript 使用平滑滚动效果返回页面顶部。
固定定位 (position: fixed;) 也常被用于创建楼层导航，使用户能够方便地导航到页面的不同部分。以下是一个简单的 HTML 和 CSS 示例，演示如何创建一个楼层导航：
HTML 结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Floor Navigation Example</title>
</head>
<body>
<div id="section1" class="section">
<h2>Section 1</h2>
<p>This is the content of Section 1.</p>
</div>
<div id="section2" class="section">
<h2>Section 2</h2>
<p>This is the content of Section 2.</p>
</div>
<div id="section3" class="section">
<h2>Section 3</h2>
<p>This is the content of Section 3.</p>
</div>
<!-- 楼层导航 -->
<div class="floor-navigation">
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</div>
</body>
</html>
CSS 样式（styles.css）：
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.section {
height: 500px;
padding: 20px;
}
.floor-navigation {
position: fixed;
top: 50%;
right: 20px;
transform: translateY(-50%);
background-color: #007bff;
color: #fff;
padding: 10px;
border-radius: 5px;
}
.floor-navigation ul {
list-style: none;
padding: 0;
}
.floor-navigation li {
margin-bottom: 10px;
}
.floor-navigation a {
text-decoration: none;
color: #fff;
display: block;
padding: 5px;
border-radius: 3px;
}
.floor-navigation a:hover {
background-color: #0056b3;
}
在这个示例中，.floor-navigation 类定义了楼层导航的样式，其中 position: fixed; 使其固定在页面的右侧。导航链接通过锚点 href 属性与各个部分的 ID 相关联，点击链接时页面会平滑滚动到相应的部分。楼层导航的位置通过 top 和 right 属性进行调整，使其在页面右侧居中显示，并通过 transform 属性进行垂直居中。:hover 伪类用于提供链接的悬停样式。
浮动定位不仅仅是页面布局的一种方式，更是一门艺术。通过本文的学习，你将更加熟练地运用CSS3中的浮动定位，为你的网页注入更多生机和灵活性。让我们一同跳入这场浮动的舞蹈，创造出引人入胜的用户体验。