使用float可实现左右布局，通过设置左浮动和右浮动使元素同行排列，常用于侧边栏与内容区布局。1. 左侧设float: left，固定宽度；2. 右侧设float: right或通过margin-left留白并创建BFC；3. 父容器用overflow: hidden清除浮动，防止高度塌陷。虽现代推荐Flexbox或Grid，但float仍适用于老项目维护，有助于理解文档流。
使用 CSS 的 float 属性可以实现经典的左右布局，虽然现代开发中更推荐使用 Flexbox 或 Grid，但在一些老项目或简单场景中，float 仍然有效且实用。
基本思路
通过设置一个元素向左浮动，另一个向右浮动，让它们在同一行内分别靠左和靠右排列。通常用于侧边栏+内容区的布局。
HTML 结构
主内容区
CSS 实现方式
给左侧元素设置 float: left，右侧元素设置 float: right，同时控制宽度避免换行。
A+响应式布局后台模板
下载
A+是一个完全响应式，基于Bootstrap3.3.7最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术，她提供了诸多的强大的可以重新组合的UI组件，并集成了最新的jQuery版本(v2.1.1)，当然，也集成了很多功能强大，用途广泛的jQuery插件，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对
.container {
overflow: hidden; / 清除浮动 /
}
.left-sidebar {
width: 200px;
float: left;
background-color: #f0f0f0;
}
.main-content {
margin-left: 200px; / 避免文字环绕 /
overflow: hidden; / 形成BFC，防止内容被浮动影响 /
}
关键点说明
- 设置固定宽度：浮动元素最好有明确宽度，否则可能因空间不足而错位。
-
清除浮动影响：父容器加
overflow: hidden可防止高度塌陷。 -
主内容使用 margin 或 BFC：用
margin-left留出侧边栏空间，或通过overflow: hidden创建块级格式化上下文（BFC），避免文字环绕。
基本上就这些。float 布局虽旧，理解它有助于维护老项目，也能加深对文档流的理解。不复杂但容易忽略细节。
