使用float: left可实现左右结构布局，侧边栏左浮动，主内容区通过margin-left留白避让，配合清除浮动防止父容器塌陷，适用于兼容性要求高的传统项目。
使用CSS的
可以轻松实现左右结构的主次布局，比如左侧为侧边栏，右侧为主内容区。这种布局方式虽然传统，但在不使用Flexbox或Grid的情况下依然实用且兼容性好。
基本HTML结构
先构建简单的HTML结构，包含一个侧边栏和一个主内容区域：
使用 float: left 实现布局
通过设置侧边栏向左浮动，并为主内容区域留出空间，即可实现左右布局：
侧边栏
主内容区域
CSS关键代码如下：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
说明：
侧边栏使用
向左靠齐。
主内容区域通过
留出足够空间，防止文字环绕。
使用
或清除浮动（clearfix）来避免父容器塌陷。
注意事项与优化建议
确保父容器正确包含浮动元素，可通过
或
伪元素
清除浮动。
设定明确的宽度，避免在不同屏幕下错位。
若需右侧为侧边栏，可将主内容左浮动，侧边栏用
。
现代布局推荐使用 Flexbox 或 Grid，但 float 在老项目中仍具价值。
基本上就这些，float 布局简单直接，适合快速实现经典两栏效果。
float: left
主内容区域
.sidebar {
float: left;
width: 200px;
background-color: #f4f4f4;
padding: 15px;
}
.main-content {
margin-left: 220px; / 避开侧边栏 /
padding: 15px;
}
float: leftmargin-leftoverflow: hiddenoverflow: hiddenfloat: right