float属性用于元素横向排列，如图文环绕；通过float:left/right实现浮动，配合margin设置间距，避免紧贴；使用clear清除浮动影响；注意父容器高度塌陷、margin失效及响应式差等问题，现代布局推荐flexbox。
在CSS中，float 属性常用于实现元素的横向排列，比如图文环绕、多列布局等。虽然现代布局更多使用 Flexbox 或 Grid，但在一些老项目或特定场景中，掌握 float 与 margin 的配合仍然很有必要。
float 基本用法
float 可以让元素脱离正常文档流，并向左或向右浮动，其他内容会围绕它排列。
常用值：- float: left; 元素向左浮动
- float: right; 元素向右浮动
- float: none; 默认值，不浮动
例如，让一个 div 向左浮动：
.box {
float: left;
width: 200px;
height: 100px;
background: #ccc;
}
使用 margin 调整浮动元素间距
浮动元素之间以及与其他内容之间的距离，可以通过 margin 控制。合理设置外边距可以避免元素紧贴在一起。
立即学习“前端免费学习笔记（深入）”；
比如两个并排的浮动盒子，添加右边距：
.left-box {
float: left;
width: 150px;
height: 100px;
margin-right: 20px;
background: #ddd;
}
<p>.right-box {
float: left;
width: 150px;
height: 100px;
background: #bbb;
}
这样两个盒子会并排显示，并且中间有 20px 的间隔。
如果希望某个非浮动元素不被浮动影响（如清除下方文字环绕），可使用 clear 属性：
.clearfix {
clear: both; /* 清除左右两侧浮动 */
}
常见问题与注意事项
使用 float 布局时容易遇到以下情况：
-
父容器高度塌陷：当子元素全部浮动后，父元素可能无法正确包裹它们。解决方法是给父元素设置
overflow: hidden;或添加清除浮动的辅助元素。 - margin 重叠或失效：在某些情况下，浮动元素的 margin 可能不会按预期表现，建议结合盒模型检查是否设置了 padding 或 border 影响了布局。
- 响应式适配差：float 不如 Flex 弹性，屏幕变小时容易错位，需配合 media query 手动调整。
基本上就这些。float 配合 margin 能完成基础布局，但要小心副作用。现在更推荐用 display: flex 来替代复杂浮动布局，代码更简洁，控制更精准。不过了解 float 仍有价值，尤其维护旧项目时。
