先说总结：在现代前端开发中，推荐使用 Flex 布局，特别是对于需要更灵活、更自适应的布局场景。然而，在特定情况下，Float 布局仍然有其用武之地，例如实现特定的文本环绕效果。
1. Flex 布局
1.1 基本概念
Flex 布局是一种基于弹性盒子模型的布局方式。它通过在容器和子元素上应用 Flex 属性，实现了更加自由和动态的布局。Flex 布局主要包括容器属性和子元素属性。
.container { display: flex; justify-content: space-between; } .item { flex: 1; }
1.2 优势和应用场景
- 弹性布局： Flex 布局具有弹性，容器内的子元素可以根据需要自动伸缩。
- 水平和垂直居中： 通过设置
justify-content和align-items属性，轻松实现水平和垂直居中。 - 自适应空间分配： 使用
flex-grow可以指定子元素在剩余空间中的相对分配比例。
2. Float 布局
2.1 基本概念
Float 是一种传统的布局方式，通过设置元素的 float 属性，让元素浮动到其容器的一侧。Float 布局主要用于实现文本环绕效果或多栏布局。
.float-left { float: left; } .float-right { float: right; }
2.2 缺点和局限性
- 清除浮动： 使用 Float 布局需要处理清除浮动的问题，以防止父元素无法正确计算高度。
- 不灵活： Float 布局对响应式设计的支持较差，不够灵活。
3. 区别与选择
3.1 清晰度和语义性
- Flex 布局： 更具语义性，容器和子元素的属性名称直观，清晰易懂。
- Float 布局： 需要额外的清除浮动处理，增加了代码的复杂度。
3.2 响应式设计
- Flex 布局： 更适合响应式设计，可以轻松适应不同屏幕尺寸。
- Float 布局： 难以处理复杂的响应式需求，容易导致布局混乱。
