前言
在网页设计的舞台上，我们常常需要元素自由灵活地漂浮在页面上，为用户呈现更富有动感的视觉体验。CSS3的浮动定位技术，就像一场舞蹈，可以让元素轻盈地在页面上舞动。本文将带你进入这个富有创意的领域，解锁浮动定位的神奇之处。
浮动float的基本概念
最本质的功能：用来实现并排
浮动的使用
要浮动，并排的盒子都要设置浮动
父盒子要有足够的宽度，否则子盒子会掉下去
浮动的顺序贴靠特性
子盒子会按照顺序进行贴靠，如果没有足够空间，则会寻找再前一个兄弟元素
浮动的元素一定能设置宽高
浮动的元素不再区分块级元素、行内元素，已经脱离了标准文档流，一律能够设置宽度和高度，即使它是span或者a标签等
使用浮动实现网页布局
注意事项
- 垂直显示的盒子，不要设置浮动，只有并排显示的盒子才要设置浮动！
- 大盒子带着小盒子跑，一个大盒子中，又是一个小天地，内部可以继续使用浮动
- div是免费的，不要节约盒子
BFC规范和浏览器差异
BFC (Box Formatting Context，块级格式化上下文) 是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
- 一个盒子不设置height，当内容子元素都浮动时，无法撑起自身
- 这个盒子没有形成BFC
如何创建BFC
- 方法1: float的值不是none
- 方法2: position的值不是static或者relative
- 方法3: display的值是inline-block、flex或者inline-flex
- 方法4: overflow:hidden (表示溢出隐藏，溢出盒子边框的内容将会被隐藏)，这个是非常好用的让盒子形成BFC的方法
BFC的其他作用
- BFC可以取消盒子margin塌陷
- BFC可以阻止元素被浮动元素覆盖
浏览器差异
- IE6、7浏览器使用haslayout机制，和BFC规范略有差异比如IE浏览器可以使用zoom:1属性“让盒子拥有layout’
- 如果要制作兼容到IE6、7的网页时，尽量让网页布局变得简单，内部有浮动的盒子要设置height属性，规范编程，不要“玩杂技”
清除浮动
- 方法一：让内部有浮动的父盒子形成BFC，它就能关闭住内部的浮动。此时最好的方法就是overflow:hidden属性
- 方法二：给后面的父盒子设置clear:both属性clear表示清除浮动对自己的影响，both表示左右浮动都清除
- 方法三：使用::after伪元素给盒子添加最后一个子元素，并且给::after设置clear:both
- 方法四：在两个父盒子之间“隔墙”，隔一个携带clear:both的盒子
相对定位 relative
相对定位：盒子可以相对自己原来的位置进行位置调整，称为相对定位
位置描述词：
- left 向右移动
- right 向左移动
- top 向下移动
- bottom 向上移动
相对定位的性质：相对定位的元素，会在“老家留坑”本质上仍然是在原来的位置，只不过渲染在新的地方而已，渲染的图形可以比喻成“影子”，不会对页面其他元素产生任何影响
相对定位的用途：
- 相对定位用来微调元素位置
- 相对定位的元素，可以当做绝对定位的参考盒子
绝对定位 absolute
绝对定位：盒子可以在浏览器中以坐标进行位置精准描述拥有自己的绝对位置
位置描述词：
- left 向右移动
- right 向左移动
- top 向下移动
- bottom 向上移动
绝对定位脱离标准文档流
- 绝对定位的元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何千扰，而是对它们进行压盖
- 脱离标准文档流的方法:浮动、绝对定位、固定定位
绝对定位的参考盒子
- 绝对定位的盒子并不是永远以浏览器作为基准点
- 绝对定位的盒子会以自己祖先元素中，离自己最近的拥有定位属性的盒子，当做基准点。这个盒子通常是相对定位的，所以这个性质也叫做“子绝父相”
绝对定位的盒子垂直居中
绝对定位的盒子垂直居中是一个非常实用的技术
position：absolute; top:50%; margin-top: -自己高度一半
堆叠顺序z-index属性
z-index属性是一个没有单位的正整数，数值大的能够压住数值小的
绝对定位的用途
- 绝对定位用来制作“压盖”、“遮罩”效果
- 绝对定位用来结合CSS精灵使用
- 绝对定位可以结合js实现动画
固定定位 fixed
不管页面如何卷动，它永远固定在那里
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中的浮动定位，为你的网页注入更多生机和灵活性。让我们一同跳入这场浮动的舞蹈，创造出引人入胜的用户体验。
