CSS -浮动属性：初学者指南

你好，未来的CSS法师们！今天，我们将要深入CSS浮动属性的神奇世界。如果你之前从未写过一行代码，也不用担心——在本教程结束时，你将能够像专业人士一样浮动元素！

CSS - Float

浮动属性是什么？

在我们跳入深水区之前，让我们从基础开始。浮动属性在CSS中就像一根魔法棒，可以让元素向容器的左侧或右侧浮动。想象你在房间里布置家具——浮动属性让你可以将东西推向一侧，为其他元素流出空间。

可能的值

浮动属性可以接受几个值，每个值都有其特殊的能力：

值	描述
left	将元素向左浮动
right	将元素向右浮动
none	元素不浮动（默认）
inherit	从其父元素继承浮动值

应用范围

浮动属性可以应用于大多数HTML元素，但最常用于：

图片
Divs
段落
标题

语法

以下是使用浮动属性的基本语法：

选择器 {
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;
}

这通过添加一个大的padding-bottom和相等的负margin-bottom来创建等高列的错觉。

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