使用float可实现左右布局，通过设置左浮动和右浮动使元素同行排列，常用于侧边栏与内容区布局。1. 左侧设float: left，固定宽度；2. 右侧设float: right或通过margin-left留白并创建BFC；3. 父容器用overflow: hidden清除浮动，防止高度塌陷。虽现代推荐Flexbox或Grid，但float仍适用于老项目维护，有助于理解文档流。
使用 CSS 的 float 属性可以实现经典的左右布局，虽然现代开发中更推荐使用 Flexbox 或 Grid，但在一些老项目或简单场景中，float 仍然有效且实用。
基本思路
通过设置一个元素向左浮动，另一个向右浮动，让它们在同一行内分别靠左和靠右排列。通常用于侧边栏+内容区的布局。
HTML 结构
<div class="container"><div class="left-sidebar">左侧菜单</div>
<div class="main-content">主内容区</div>
</div>
CSS 实现方式
给左侧元素设置 float: left，右侧元素设置 float: right，同时控制宽度避免换行。
.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 布局虽旧，理解它有助于维护老项目，也能加深对文档流的理解。不复杂但容易忽略细节。
