【掰开揉碎】Flex 布局与 Float

先说总结：在现代前端开发中，推荐使用 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 布局： 难以处理复杂的响应式需求，容易导致布局混乱。