✨
本文是我自己的网站上提供的更大系列文章的一部分。单击此处了解有关 CSS 101：系列的更多信息。完全免费！
欢迎来到过去的爆炸！在 Flexbox 和 Grid 像现代网页设计的超级英雄一样席卷全球之前，曾经有一段时间浮动和清除统治了 CSS 世界。如果您是网页设计新手，您可能会想，“浮动和清除到底是什么？我为什么要关心？”好吧，系好安全带，因为我们即将踏上 CSS 历史的怀旧之旅。
剧透：今天你可能会发现一些很酷的技巧！
将 float 想象成 CSS 世界中叛逆的少年 - 总是突破界限并造成一些混乱。浮动体最初设计用于将文本包裹在图像周围，但聪明的开发人员很快意识到他们也可以使用它们来创建布局。
img {
float: left;
margin-right: 15px;
}
在上面的例子中，float: left;使图像“浮动”到左侧，允许文本环绕它。在 Flexbox 和 Grid 出现之前，浮动是创建多列布局的流行选择。然而，它们可能有点挑剔，如果使用不小心，很容易导致布局问题。
花车可能有点叛逆，但清除者是他们的维和者。清晰的属性就像调解者，介入解决浮动可能造成的混乱。如果您使用浮动并发现元素重叠或行为不符合预期，则清除可以提供帮助。
.clearfix::after {
content: "";
display: table;
clear: both;
}
通过使用上述CSS添加clearfix类，您可以确保任何浮动元素都包含在其父容器中。这是防止那些恼人的布局故障（元素似乎飘入深渊）的好方法。
在 Flexbox 和 Grid 抢尽风头之前，CSS 还有一些其他的技巧。以下是一些经典的布局技巧：
.box {
display: inline-block;
width: 30%;
margin-right: 2%;
}
.container {
display: table;
width: 100%;
}
.item {
display: table-cell;
width: 33%;
}
这些方法在很大程度上被现代布局技术所掩盖，但仍然可以让我们一睹网页设计的演变。
那么，浮动和清除在现代网页设计世界中仍然占有一席之地吗？绝对地！虽然 Flexbox 和 Grid 现在是创建布局的首选工具，但浮动和清除在某些情况下仍然有用，例如简单布局或使用遗留代码时。
例如，您可以使用浮动来进行文本换行，或者当您想以简单的方式对齐少量元素时。但对于复杂的响应式布局，Flexbox 和 Grid 是您最好的朋友。
浮动、清除和其他遗留布局技术可能看起来像是过去的遗物，但它们是 CSS 丰富历史的一部分。了解它们可以为您奠定坚实的基础，并帮助您欣赏现代布局系统的强大功能。另外，了解这些老派技巧在处理较旧的项目或奇怪的设计挑战（或那些可怕的面试回合）时会派上用场。
编码愉快！
✨
嘘！如果您喜欢所读内容，您应该单击此处查看 CSS 101：系列。完全免费！
以上是CSS 布局技术 - 浮动、清除和传统布局：老派酷炫的详细内容。更多信息请关注PHP中文网其他相关文章！
