答案：使用float属性可实现左右浮动布局，通过float:left和float:right使元素并排，配合百分比宽度与box-sizing:border-box控制尺寸，避免溢出；父容器需清除浮动防止塌陷，常用::after伪元素clear:both解决；虽现代布局多用Flex或Grid，但float在兼容性场景仍具价值。
在CSS中实现左浮右浮布局，主要依靠 float 属性配合合理的宽度控制。虽然现代开发更多使用 Flex 或 Grid 布局，但在一些兼容性要求较高或结构简单的场景中，float 依然实用。下面介绍如何正确使用 float 实现左右浮动布局，并掌握关键的宽度分配技巧。
1. 使用 float 实现左右布局
通过给元素设置 float: left 或 float: right，可以让块级元素向左或向右靠边排列，其余内容环绕其周围。常用于图文混排、两栏布局等。
示例：创建一个左侧主内容、右侧侧边栏的布局：
<div class="container"> <div class="left">左侧内容</div> <div class="right">右侧内容</div> </div>
.container {
width: 100%;
overflow: hidden; /* 清除浮动影响 */
}
.left {
float: left;
width: 70%;
background-color: #e0f7fa;
}
.right {
float: right;
width: 30%;
background-color: #ffe0b2;
}
这样，两个 div 分别向左和向右浮动，形成并排布局。
立即学习“前端免费学习笔记（深入）”；
2. 宽度分配的关键原则
使用 float 布局时，浮动元素的总宽度不能超过父容器，否则会导致换行错位。以下几点是宽度控制的核心技巧：
- 左右浮动元素的宽度之和应小于等于父容器宽度（推荐留出一点余量）
- 使用百分比宽度可提升响应式能力，避免固定像素导致溢出
- 若设置了 padding 或 border，建议配合 box-sizing: border-box 防止宽度计算超出预期
例如：
.left, .right {
box-sizing: border-box;
padding: 10px;
}
3. 清除浮动避免布局塌陷
当父容器只包含浮动元素时，会出现高度塌陷——父元素无法包裹子元素。解决方法有多种：
- 给父容器设置 overflow: hidden
- 使用伪类清除：::after { content: ""; display: block; clear: both; }
推荐使用伪元素方式，更语义化且不影响溢出表现：
.container::after {
content: "";
display: block;
clear: both;
}
4. 浮动与文档流的关系
浮动元素脱离正常文档流，但不会完全脱离内容流，文本等内容会围绕其排列。因此，在使用 float 时要注意：
- 非浮动块级元素会独占一行，可能被挤到下方
- 内联内容（如文字）会避开浮动元素，形成环绕效果
- 避免在浮动布局中混入未处理的块级元素，防止意外换行
基本上就这些。float 虽然“老派”，但在理解 CSS 布局演变过程中非常重要。掌握它有助于深入理解文档流与定位机制，也为维护旧项目提供支持。实际开发中，建议优先考虑 Flex 和 Grid，但在特定场景下，float 依然是可靠选择。
