float属性曾用于实现多列布局和文本环绕，通过left、right值使元素脱离文档流，但会导致父容器高度塌陷；需用clear、BFC或伪元素清除浮动；现推荐使用Flexbox和Grid进行现代布局。
在网页布局中，float 属性曾是实现多列布局和文本环绕图片的核心手段。虽然现代开发更多使用 Flexbox 和 Grid，但理解 float 仍有助于维护旧项目或处理特定排版需求。
float 基本用法
float 属性用于将元素从正常文档流中“浮动”起来，使其向左或右移动，其他内容围绕它排列。
常用取值：- left：元素靠容器左侧浮动
- right：元素靠容器右侧浮动
- none：默认值，不浮动
- inherit：继承父元素的浮动设置
示例：
.box1 {
float: left;
width: 200px;
height: 100px;
background: #ccc;
}
.box2 {
float: right;
width: 150px;
height: 80px;
background: #999;
}
这样 .box1 会贴左，.box2 贴右，文字等内容会围绕它们显示。
立即学习“前端免费学习笔记（深入）”；
清除浮动与高度塌陷问题
当父容器内所有子元素都浮动时，父元素可能“塌陷”，即高度变为0，因为它无法感知浮动子元素的存在。
解决方法有以下几种：
- 使用 clear 属性：添加一个空元素并设置 clear: both;
.clearfix {
clear: both;
}.container {
overflow: hidden; /* 形成BFC，包含浮动元素 */
}.clearfix::after {
content: "";
display: block;
clear: both;
}
/* 使用时给父元素加上 clearfix 类 */
浮动布局的实际应用
利用 float 可以实现简单的两栏或三栏布局。
例如创建左侧固定宽度、右侧自适应的布局：
.sidebar {
float: left;
width: 200px;
background: #eee;
}
.main-content {
margin-left: 210px; /* 避开侧边栏 */
background: #fff;
}
注意：右侧内容需通过 margin 留出空间，防止被浮动元素覆盖。
注意事项与替代方案
float 布局存在局限性：难以垂直对齐、响应式调整复杂、需要手动清除浮动。
现代布局建议：
- 使用 Flexbox 实现一维布局（如导航栏、弹性盒子）
- 使用 CSS Grid 实现二维网格布局
- 仅在兼容老浏览器或特定图文环绕场景下使用 float
基本上就这些。掌握 float 的原理和清除方式，能更好理解 CSS 布局演变过程，但在新项目中优先考虑更强大的现代布局方案。
