CSS - 清除浮动：初学者的全面指南

你好，有抱负的网页开发者们！今天，我们将深入探讨一个可能一开始听起来有点神秘的课题：CSS 清除浮动。如果你对这个概念感到陌生，不用担心；我会一步步为你解释，就像我多年来教导无数学生那样。所以，拿起一杯咖啡（或者如果你喜欢，也可以是茶），让我们一起踏上这段旅程！

CSS - Clearfix

什么是清除浮动，我们为什么需要它？

在我们深入细节之前，让我们先了解一下清除浮动是什么。想象一下你正在尝试整理一个乱糟糟的房间。你有一些高物品、一些矮物品，还有一些就是不想待在原地的。这在网页设计中使用浮动元素时也会发生。它们可能会导致布局问题，使我们的网页看起来就像那个乱糟糟的房间。清除浮动就是我们的清洁工具——它帮助保持一切整洁有序。

CSS 清除浮动 - 使用 overflow 和 float 属性

让我们从一个最常见的清除浮动技术开始。这个方法同时使用了 overflow 和 float 属性。

<div class="clearfix">
<div class="float-left">我正在左浮动！</div>
<div class="float-right">我正在右浮动！</div>
</div>

.clearfix::after {
content: "";
display: table;
clear: both;
}

.float-left {
float: left;
}

.float-right {
float: right;
}

在这个例子中，我们使用了 ::after 伪元素在我们的容器后面创建了一个隐藏元素。这个隐藏元素清除了左右浮动，确保我们的容器扩展以包含所有浮动元素。

代码解释

.clearfix::after：这个选择器目标是一个在清除浮动容器之后创建的伪元素。
content: "";：我们添加空内容来创建伪元素。
display: table;：这创建了一个类似表格的结构，这有助于清除浮动。
clear: both;：这是清除左右浮动的神奇行。

CSS 清除浮动 - 使用 overflow 属性

另一种方法是只使用 overflow 属性。这个方法更简单，但有一些局限性。

<div class="clearfix-overflow">
<div class="float-left">仍然在左浮动！</div>
<div class="float-right">而我仍然在右边！</div>
</div>

.clearfix-overflow {
overflow: auto;
}

.float-left, .float-right {
width: 45%;
}

.float-left {
float: left;
}

.float-right {
float: right;
}

它是如何工作的

overflow: auto; 创建了一个所谓的“块格式化上下文”。这就像创建了一个新的环境，其中浮动元素被完全包含。但是要小心——如果内容太多，这种方法有时会创建不想要的滚动条。

CSS 清除浮动 - 使用 height 属性

现在，让我们看看一个可能看起来直观但带有重大缺陷的方法。

<div class="clearfix-height">
<div class="float-left">又是在左边！</div>
<div class="float-right">一如既往地在右边！</div>
</div>

.clearfix-height {
height: 100px; /* 或者任何固定高度 */
}

.float-left, .float-right {
width: 45%;
}

.float-left {
float: left;
}

.float-right {
float: right;
}

为什么这不是理想的

虽然设置一个固定高度可以包含浮动元素，但它不灵活。如果你的内容增长呢？你将不得不不断调整高度。这就像给一个成长中的孩子买鞋——你总是要追赶！

CSS 清除属性

最后，让我们来谈谈 clear 属性本身。这是所有清除浮动技术的基础。

<div class="container">
<div class="float-left">我正在左浮动！</div>
<div class="float-right">我正在右浮动！</div>
<div class="clear-both"></div>
</div>

.float-left {
float: left;
width: 45%;
}

.float-right {
float: right;
width: 45%;
}

.clear-both {
clear: both;
}

理解清除属性

clear 属性可以接受几个值：

left：清除左浮动
right：清除右浮动
both：清除左右浮动
none：默认值，允许两侧浮动

下面是一个总结这些值的表格：

值	描述
left	清除左浮动
right	清除右浮动
both	清除左右浮动
none	默认值，允许两侧浮动

总结

就这样，朋友们！我们已经穿越了 CSS 清除浮动的世界。记住，就像网页开发中的许多事情一样，没有一劳永逸的解决方案。你选择的方法取决于你的特定布局需求。

就像我总是告诉我的学生那样，真正理解这些概念的最好方式就是去实践。尝试每种方法，打破它们，修复它们，看看它们在不同的场景中是如何工作的。这样，你才能对不同情况下的最佳方法形成直觉。

继续编码，继续学习，别忘了在这个过程中享受乐趣。毕竟，网页开发既是艺术，也是科学。快乐清除浮动！

Credits: Image by storyset