使用 float 可实现元素左右排列，通过 float:left 和 float:right 使元素分别左、右浮动，或多个元素均设为 float:left 实现横向排列；需注意父容器塌陷问题，常用 overflow:hidden 或伪元素 clear:both 清除浮动；尽管 float 在旧项目中有用，但新项目推荐使用 Flexbox 或 Grid 布局以获得更优的布局控制。
在CSS中使用 float 可以让元素脱离正常文档流，向左或向右浮动，从而实现左右排列的效果。虽然现代布局更推荐使用 Flexbox 或 Grid，但在一些老项目或简单场景中，float 依然有其用途。
将一个元素设置为 float: left，另一个设置为 float: right，可以让它们分别靠容器的左右两侧排列。
示例代码：
.container {
overflow: hidden; /* 防止父容器塌陷 */
}
.left-box {
float: left;
width: 200px;
background-color: #ddd;
}
.right-box {
float: right;
width: 200px;
background-color: #ccc;
}
HTML 结构：
<div class="container"> <div class="left-box">左侧内容</div> <div class="right-box">右侧内容</div> </div>
如果想让多个块级元素从左到右依次排列，可以全部设置为 float: left。
立即学习“前端免费学习笔记（深入）”；
示例：.item {
float: left;
width: 100px;
height: 50px;
margin: 5px;
background: #eee;
border: 1px solid #ccc;
}
这样多个 .item 元素会在一行从左往右排列，直到容器宽度不够时换行。
使用 float 布局时需注意以下几点：
防止父容器塌陷：
.container::after {
content: "";
display: table;
clear: both;
}
或者直接设置父容器：
.container {
overflow: hidden; /* 自动包含浮动子元素 */
}
基本上就这些。虽然 float 能实现左右排列，但建议在新项目中优先考虑 flex 或 grid 布局，更简洁且不易出错。
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
978
收藏
