浮动是CSS中一种布局技术，主要用于实现以下效果：
1. 文字环绕图片：让文本围绕浮动元素排列（最初设计目的）。
2. 创建多列布局：使多个块级元素水平排列（在Flexbox/Grid出现前的主流方式）。
3. 脱离文档流：浮动元素会脱离普通文档流，后续元素会忽略其空间占用（但内容会环绕）。
语法：
css
element {
float: left | right | none;
清除（Clear）的作用
清除用于解除浮动对后续元素的影响，强制元素出现在浮动元素下方，避免布局错乱。
常见场景：
1. 解决父容器高度塌陷：父容器无法自动包含浮动子元素的高度。
2. 避免内容环绕：确保后续内容不从浮动元素旁开始排列。
语法：
css
element {
clear: left | right | both | none;
核心区别
| 特性 | 浮动（Float） | 清除（Clear） |
|-|--|--|
| 目的 | 创建环绕效果或水平布局 | 解除浮动对后续元素的影响 |
| 文档流 | 脱离文档流（但内容会环绕） | 不影响自身文档流 |
| 影响范围 | 影响后续所有元素的布局 | 仅作用于自身的布局行为 |
| 常见用途 | 图文混排、多栏布局 | 修复高度塌陷、控制布局流 |
实际应用示例
浮动导致高度塌陷
html
浮动元素