使用Flexbox和Grid布局可彻底替代清除浮动，因其自带文档流管理和对齐能力。1. Flex通过display: flex实现一维布局，父容器自动包裹子项；2. Grid通过display: grid构建二维结构，无需担心塌陷；3. 仅在使用float时才需clear，现代布局中清除浮动已无必要。新项目应优先采用Flex或Grid，代码更简洁且响应式更强。
随着现代CSS布局的发展，Flexbox和Grid已经成为构建页面结构的主流方式。传统清除浮动（clear floats）的方法，比如使用 clear: both 或伪元素 ::after 技巧，在Flex和Grid布局中已不再需要。这是因为Flex和Grid本身具备更强大的空间分配与对齐能力，天然解决了浮动带来的文档流问题。
Flex布局中的替代方案
在Flex容器中，子元素默认沿主轴排列，不会脱离文档流，因此不存在“浮动溢出父容器”的情况。
要实现原本需要清除浮动才能达到的效果，比如让内容块正确包裹其子项，只需将容器设为Flex即可：
- 设置 display: flex 或 display: inline-flex
- 子元素自动参与弹性布局，无需额外清除操作
- 可通过 flex-direction 控制排列方向
- 利用 align-items 和 justify-content 精确控制对齐
例如，一个两栏布局：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
}
.sidebar {
width: 200px;
}
.main {
flex: 1;
}
这个结构无需任何清除浮动的处理，父容器会自然包裹子元素。
Grid布局中的替代方案
CSS Grid是二维布局系统，完全摆脱了一维的浮动模型。通过定义行和列，元素的位置由网格轨道决定，不存在浮动导致的塌陷问题。
使用Grid时，以下方式可替代传统清除浮动的需求：
- 设置 display: grid 并定义 grid-template-columns 和 grid-template-rows
- 使用 gap 控制间距，代替外边距叠加带来的布局混乱
- 通过 grid-area 明确定位区域，避免浮动错位
示例：三栏等宽布局
.layout {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
这种写法不仅简洁，还能确保所有子元素在各自的网格中对齐，父容器高度自动适应内容。
何时还需要考虑清除浮动？
只有在使用传统浮动布局（float: left/right）时才需要清除浮动。一旦采用Flex或Grid，这类问题就不存在了。如果你还在维护老项目，可以保留 ::after 清除法；但在新项目中，推荐直接使用现代布局模式。
基本上就这些。用Flex和Grid，不仅代码更少，而且语义清晰、响应式友好，清除浮动已成为历史。不复杂但容易忽略的是：别在已经使用Flex或Grid的容器里再想“怎么清浮动”——你根本不需要。
