添加一个类名（例如clearfix或clear）。
在CSS中，为这个类名设置clear: both;。
代码示例：
HTML修改：
Resources for your benefit
This is where we keep and organize the many resources that you are sure to use while you play this game. From calculators and wikis to guides created by other players.
Copyright © 2022 OSHelper
CSS修改：
.clear-float {
clear: both; /* 强制元素在左右浮动元素下方显示 */
height: 0; /* 可选：确保该元素不占用垂直空间 */
visibility: hidden; /* 可选：隐藏该元素 */
} 注意事项：
这种方法简单直观，但会在HTML结构中引入额外的空标签，这在语义上可能不够优雅。为了避免额外的空标签，更专业的做法是使用CSS伪元素 （::after）结合clear: both;，即所谓的“clearfix hack”。
解决方案二：利用BFC自动清除浮动 (overflow: hidden)
另一种常用且通常更简洁的清除浮动方法是触发父容器的“块级格式化上下文”（Block Formatting Context, BFC）。当一个元素形成BFC时，它会包含其内部的所有浮动子元素，从而解决父容器高度塌陷的问题。
触发BFC的方式有很多，其中最常见且适用于清除浮动的是设置overflow属性为hidden、auto或scroll（非visible）。
实现方式：
直接在浮动元素的父容器上添加overflow: hidden;样式。 代码示例：
CSS修改：
main {
padding-left: 7.5px;
padding-right: 7.5px;
overflow: hidden; /* 触发BFC，包含内部浮动元素 */
}
/* 其他CSS样式保持不变 */
.left {
float: left;
width: 30%;
padding-bottom: 5px;
}
.right {
float: right;
width: 70%;
}
footer {
text-align: center;
} HTML结构保持不变：
OSHelper Resources
Home Guides Resources Advice
Resources for your benefit
This is where we keep and organize the many resources that you are sure to use while you play this game. From calculators and wikis to guides created by other players.
OSRS Wiki
This is the official wiki page for the game. It is extremely helpful for every player. It has information about quests, items, monsters, activities, and much more. We recommend using this everytime you have a question about the game.
Runelite Client
This is a very helpful client for playing the game. Clients are used to play the game, but they have especially helpful plugins and other useful tools that can be used while playing the game. This client is the most popular and helpful client
out there.
Oldschool Tools
Very useful website. It housed many different calculators, but most notably their skill calculators. These calculators tell you how much you need to train and how much in game currency you will need to spend to level up each skill.
Official OSRS Website
This is the official website. You can access your account and other official resources here. Again, be careful of fake sites that will try and steal your information.
OSRS Guide
Your one stop shop for many different guides reguarding the game. From beginner to advanced guides, you will definitely get some use out of this site.
Copyright © 2022 OSHelper
注意事项： overflow: hidden;方法简洁且不增加HTML结构，是推荐的解决方案之一。然而，需要注意的是，如果父容器内的内容超出其尺寸，overflow: hidden;会导致超出部分被裁剪而不可见。在大多数清除浮动的场景中，这通常不是问题，但仍需留意。
总结
正确处理CSS浮动是构建稳定布局的关键。当遇到浮动元素导致父容器高度塌陷、页脚错位或背景溢出等问题时，可以采用以下两种主要策略来清除浮动：
添加清除浮动元素 ：在浮动元素组之后插入一个设置了clear: both;的元素。虽然简单，但可能引入冗余HTML。更优的实践是使用CSS伪元素实现的“clearfix hack”。
触发父容器的BFC ：通过在父容器上设置overflow: hidden;（或其他触发BFC的属性），使其自动包含内部的浮动子元素。这种方法通常更简洁，且不修改HTML结构，但需注意潜在的内容裁剪问题。
在现代CSS布局中，Flexbox（弹性盒子）和Grid（网格布局）提供了更强大、更灵活且语义化的布局方案，它们原生支持多列布局而无需处理浮动带来的问题。对于新的项目或复杂的布局需求，建议优先考虑使用Flexbox或Grid。然而，理解和掌握浮动及其清除方法，对于维护老旧项目或处理特定兼容性场景仍然至关重要。
