当页面需要将一系列块级元素横向摆放在同一行时，直接编写html结构往往只能看到它们垂直堆叠。因为<div>、<h1>、<p>等元素默认的display属性为block，会强制换行。为了实现横向排版，开发者通常会借助css中的float或flex布局。两种方式都能达到效果，但实现原理和适用场景截然不同。
一、Flexbox布局：为横向排列而生的现代方案
Flexbox（弹性盒子）是专门针对页面布局而设计的css模块，它通过将容器定义为display: flex，使其内部的子元素成为弹性项目。默认情况下，弹性项目会沿着主轴（main axis）方向排列，而主轴的默认方向就是水平从左到右。这意味着只需要在父容器上设置一个属性，所有直接子元素便会立即横向排成一行。
核心用法是定义一个带有display: flex的容器，并为项目设置flex属性来控制伸缩比例。例如，一个经典的导航条结构：
<nav class="nav"> <a href="#">首页</a> <a href="#">产品</a> <a href="#">服务</a> <a href="#">关于</a> </nav>
配合以下css，链接就会横向等宽排列，并且容器会自动分配剩余空间：
.nav {
display: flex; /* 启动弹性布局 */
justify-content: space-around; /* 项目之间平均分布 */
background-color: #f5f5f5;
padding: 10px 0;
}
.nav a {
flex: 1; /* 每个项目均分剩余空间 */
text-align: center;
text-decoration: none;
color: #333;
font-size: 16px;
}
justify-content属性控制主轴上的对齐方式，space-around让每个项目左右间距相等，视觉效果均衡。而flex: 1是一个简写，相当于flex-grow: 1; flex-shrink: 1; flex-basis: 0%，确保所有链接平均占用容器的宽度，无论文字长短，每个项目区域都一致。这种特性在传统的Float布局中很难实现，通常需要手动计算百分比宽度或配合额外的内外边距。
Flexbox还提供了强大的垂直居中能力。通过align-items: center，可以让高度不同的项目在交叉轴上居中对齐，这对于按钮与图标混合排列的场景特别实用。此外，flex-wrap: wrap可使项目在空间不足时换行，实现响应式网格，而order属性还能轻松改变项目的视觉顺序，不必修改html结构。总的来说，Flexbox将横向排版的逻辑从数值计算中解放出来，让开发者更专注于设计意图。
二、Float布局：经典可靠的横向排列方法
在Flexbox普及之前，Float是实现横向排列的主要手段。通过给元素设置float: left，元素会脱离正常的文档流并向左浮动，直到碰到父容器或另一个浮动元素的边界。这样，连续设置浮动的块级元素就会像单词一样从左到右排列在一起。
一个常见的应用是创建多列卡片布局：
<div class="card-container"> <div class="card">卡片1</div> <div class="card">卡片2</div> <div class="card">卡片3</div> </div>
对应的css需要定义每个卡片的宽度，并通过浮动让它们并排：
.card-container {
overflow: hidden; /* 触发BFC，解决高度塌陷 */
width: 100%;
}
.card {
float: left; /* 左浮动 */
width: 30%; /* 宽度为容器的30% */
margin-right: 5%; /* 右边距5% */
background-color: #e9ecef;
padding: 20px;
box-sizing: border-box;
}
.card:last-child {
margin-right: 0; /* 最后一张卡片清除右外边距 */
}
这里用到了box-sizing: border-box来确保内边距和边框包含在设定的宽度内，避免盒子总宽度超出父容器导致换行。同时，因为浮动元素脱离了正常流，父容器.card-container会失去高度，表现为高度塌陷。解决方案是在父元素上设置overflow: hidden，触发块格式化上下文（BFC），让它包裹住浮动子元素。其他清除浮动的方法还包括使用伪元素::after添加clear: both，或者直接在最后一个浮动元素后插入一个带有clear: both的空元素。
Float布局的优势在于它出现的时间早，浏览器兼容性极佳，即便是IE6也能良好支持。在简单的横向排列场景中，比如将图片向左浮动让文本环绕，或者制作基础的列表横向展示，Float所需的代码量有时比Flexbox更少。不过，当横向排列的元素数量不固定或需要动态分配空间时，Float就暴露出明显弱点——必须手动设定每个元素的宽度（或用calc计算），并且无法实现垂直方向的对齐控制，也没有类似justify-content的分散对齐能力。此外，浮动元素的父容器高度塌陷问题如果没有妥善处理，会导致后续布局混乱，这给长期维护带来负担。
三、两种方案的深度对比与选择建议
从布局目的来看，Flexbox的核心理念是“容器主导的布局”，父容器声明display: flex后，所有子元素自动服从弹性规则；而Float是由“元素自身决定浮动”，父容器只是被动地容纳它们。这种设计理念的差异直接决定了两者在应对复杂排版时的能力上限。
在响应式设计上，Flexbox可以很自然地通过媒体查询改变flex-direction，将横向排列转换为纵向堆叠，而Float则需要重置浮动并调整宽度。当需要处理不等高的项目时，Flexbox默认的align-items: stretch会让所有项目自动拉伸到相同高度，Float则完全没有这种等高特性，往往需要额外技巧或用javascript弥补。在语义与可访问性方面，Flexbox不改变元素的视觉顺序与DOM顺序的对应关系，除非主动使用order属性；而Float在某些复杂布局中可能需要调整html源码的书写顺序来适应浮动，这可能导致内容与结构错位。
性能方面，在现代浏览器中两者差距微乎其微，但遇到大量浮动元素且复杂嵌套时，浏览器的重绘与回流成本会略高于Flexbox，因为浮动元素需要更多的计算来确定位置。至于兼容性，Flexbox在IE10及以上版本都得到了支持（部分属性需要-ms-前缀），考虑到主流产品已经逐渐放弃对旧版IE的兼容，Flexbox已经成为新一代项目的首选方案。而Float作为一项基础css特性，几乎可以追溯到所有浏览器，在一些需要支撑遗留系统的场景或者仅仅充当文本环绕图片的效果时，仍然不可或缺。
综合推荐：如果是新项目，并且横向排列涉及等分空间、对齐控制、顺序调整等需求，毫无疑问选择Flexbox。它可以大幅减少布局代码，让响应式实现更加优雅。但假如你只需要一个简单的图片左浮动或者快速将几个按钮排成一行，并且要保证在非常古老的浏览器上工作正常，那么Float依然是一个可靠的备选。另外，在维护老项目时，了解并熟练运用Float清除浮动技巧能够帮助你平滑地进行增量改进。无论选择哪条路径，理解它们的底层逻辑都能让你在面对横向排版需求时更加从容。