浮动布局通过float实现多列排列，需清除浮动以防止父元素塌陷，常用overflow:hidden或伪类::after处理；li设为float:left并配合width、margin控制布局，结合box-sizing:border-box避免宽度溢出；响应式中通过媒体查询调整屏幕适配，如小屏下改为两列或堆叠显示。
浮动布局在早期网页设计中被广泛用于创建多列列表结构，比如导航菜单、图片画廊等。虽然现代开发更推荐使用 Flexbox 或 Grid，但在维护旧项目或特定场景下，掌握如何用 float 正确排列 ul li 仍具实用价值。
清除浮动避免布局错乱
当 li 元素设置 float 后，父级 ul 会失去高度，导致后续内容上移重叠。必须清除浮动以恢复正常文档流。
- 给 ul 添加 overflow: hidden，触发 BFC 包裹子元素
- 使用伪类 ::after 清除浮动，兼容性好且语义清晰
ul {
list-style: none;
padding: 0;
margin: 0;
overflow: hidden; /* 或使用伪类清除 */
}
<p>ul::after {
content: "";
display: table;
clear: both;
}控制 li 浮动方向与间距
通过设置 li 的浮动方向和尺寸，实现水平排列的列表项，并合理留白提升可读性。
- 将 li 设置为 float: left 实现左对齐排列
- 配合 width 定义每项宽度（如 25% 可实现四列）
- 使用 margin 调整项间间距，注意盒模型影响总宽
li {
float: left;
width: 25%;
padding: 10px;
box-sizing: border-box;
}响应式下的浮动适配处理
在小屏幕中，过密的浮动项会影响体验，需通过媒体查询调整列数或恢复堆叠。
立即学习“前端免费学习笔记（深入）”；
- 在移动端设置 li 不浮动并块级显示，自动换行
- 利用 max-width 控制最大列宽，适应不同屏幕
@media (max-width: 768px) {
li {
width: 50%;
}
}
@media (max-width: 480px) {
li {
float: none;
width: 100%;
}
}基本上就这些。用 float 布局时重点在于清除浮动、控制宽度和响应式断点处理，虽不如 Flex 简洁，但理解其机制有助于应对兼容需求。
