CSS - 浮动属性：初学者指南
你好，未来的CSS法师们！今天，我们将深入CSS浮动属性的神奇世界。如果你之前从未编写过一行代码，也不用担心——在本教程结束时，你将能够像专业人士一样浮动元素！
浮动属性是什么？
在我们跳入深水区之前，让我们从基础开始。浮动属性在CSS中就像一根魔法棒，可以让元素浮动到其容器的左侧或右侧。想象你在房间内摆放家具——浮动属性让你可以将物体推到一边，为其他元素流动腾出空间。
可能的值
浮动属性可以接受几个值，每个值都有其特殊功能：
| 值 | 描述 |
|---|---|
| left | 将元素浮动到左侧 |
| right | 将元素浮动到右侧 |
| none | 元素不浮动（默认） |
| inherit | 从其父元素继承浮动值 |
应用范围
浮动属性可以应用于大多数HTML元素，但它最常用于：
- 图片
- Div标签
- 段落
- 标题
语法
以下是使用浮动属性的基本语法：
选择器 {
float: 值;
}例如：
img {
float: left;
}这将使你页面上的所有图像都浮动到左侧。
CSS Float - 等宽列
让我们从一个实际例子开始。假设你正在为一家面包店创建网站，并且你想并排显示三种糕点。以下是如何使用浮动来创建等宽列：
<div class="pastry-container">
<div class="pastry">羊角面包</div>
<div class="pastry">泡芙</div>
<div class="pastry">马卡龙</div>
</div>.pastry-container {
width: 100%;
}
.pastry {
float: left;
width: 33.33%;
padding: 15px;
box-sizing: border-box;
}在这个例子中，我们将每个糕点div浮动到左侧，并为其设置33.33%的宽度（100%除以3）。box-sizing: border-box 确保内边距包含在宽度计算中。
CSS Float - 等高列
现在，假设你希望这些列无论内容如何都具有相同的高度。我们可以使用一点小技巧，使用内边距和边距：
.pastry-container {
overflow: hidden;
}
.pastry {
float: left;
width: 33.33%;
padding-bottom: 500px;
margin-bottom: -500px;
}这通过添加大的内边距和相等的负边距，创造出等高列的错觉。
CSS Float - 并排图片
让我们为我们的面包店网站添加一些令人垂涎的糕点图片：
<div class="image-container">
<img src="croissant.jpg" alt="羊角面包">
<img src="eclair.jpg" alt="泡芙">
<img src="macaron.jpg" alt="马卡龙">
</div>.image-container {
width: 100%;
}
.image-container img {
float: left;
width: 33.33%;
padding: 5px;
box-sizing: border-box;
}这将使我们的糕点图片并排显示，每个图片占据容器宽度的三分之一。
CSS Float - 弹性盒子
但是，如果我们希望我们的布局更加灵活呢？这时flexbox（弹性盒子）出现了，它是现代CSS布局的超级英雄：
.pastry-container {
display: flex;
flex-wrap: wrap;
}
.pastry {
flex: 1 0 300px;
margin: 5px;
}这创建了一个灵活的布局，其中每个糕点框至少宽300px，并将扩展以填充可用空间。
CSS Float - 导航菜单
浮动经常用于创建水平导航菜单。让我们为我们的面包店做一个菜单：
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#menu">菜单</a></li>
<li><a href="#about">关于我们</a></li>
<li><a href="#contact">联系方式</a></li>
</ul>
</nav>nav ul {
list-style-type: none;
padding: 0;
}
nav li {
float: left;
}
nav a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: #333;
}这创建了一个水平导航菜单，每个项目都浮动到左侧。
CSS Float - 网页布局
浮动可以用来创建整个网页布局。以下是一个简单的两列布局：
<div class="container">
<header>欢迎来到我们的面包店</header>
<nav>
<!-- 导航项在这里 -->
</nav>
<main>
<article>我们的故事</article>
<aside>今日特色</aside>
</main>
<footer>联系我们</footer>
</div>.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
header, nav, footer {
width: 100%;
clear: both;
}
main {
width: 100%;
}
article {
float: left;
width: 70%;
}
aside {
float: right;
width: 25%;
}这创建了一个带有主要内容区域和侧边栏的布局。
CSS Float - 段落
浮动可以用来使文本围绕图像：
<div class="content">
<img src="baker.jpg" alt="我们的主厨" class="float-left">
<p>认识我们的主厨，Chef Pierre。拥有超过30年的经验...</p>
</div>.float-left {
float: left;
margin-right: 15px;
}这将使文本围绕我们的主厨图像。
CSS Float - 带边距的图片
给浮动图像添加边距可以提高可读性：
img {
float: left;
margin: 0 15px 15px 0;
}这为我们的浮动图像周围添加了一些空间。
CSS Float - 不浮动
有时，你需要防止一个元素浮动。clear属性来拯救：
.no-float {
clear: both;
}这确保带有no-float类的元素将出现在任何浮动元素下方。
CSS Float - 向左或向右浮动
记住，你可以将元素向左或向右浮动：
.float-left {
float: left;
}
.float-right {
float: right;
}CSS Float - 图像重叠
小心！如果空间不足，浮动元素可能会重叠。你可以通过适当的清除来防止这种情况：
.clearfix::after {
content: "";
display: table;
clear: both;
}将这个类添加到浮动元素的父容器中，以防止重叠。
CSS Float - 图像不紧邻
有时，你希望浮动的图像保持其原始顺序：
img {
float: left;
clear: left;
}这确保每个图像都从新的一行开始。
CSS Float - 在前辈下方浮动
要使元素在其前辈下方浮动：
.float-below {
clear: both;
float: left;
}这清除任何之前的浮动，然后浮动该元素。
CSS Float - 到新行
要强制一个元素在浮动元素后换到新行：
.new-line {
clear: both;
}CSS Float - 相关值
以下是float相关属性和值的表格：
| 属性 | 值 |
|---|---|
| float | left, right, none, inherit |
| clear | left, right, both, none, inherit |
| overflow | visible, hidden, scroll, auto |
就这样，朋友们！你已经迈出了进入CSS浮动物理世界的第一步。记住，熟能生巧，所以不要害怕尝试这些技巧。在你意识到之前，你将能够创造出即使是经验最丰富的网页设计师也会感到骄傲的美丽、基于浮动的布局。快乐编码！
Credits: Image by storyset