面试题：CSS中浮动布局与Flexbox布局在实现多列布局时的差异

Question

请阐述在实现多列布局场景下，CSS浮动布局和Flexbox布局各自的特点、优势与劣势，并举例说明在何种情况下会优先选择其中一种布局方式。

Answer 1

CSS浮动布局

• 特点：元素脱离文档流，向左或向右浮动，周围元素会围绕它排列。
• 优势：
  • 兼容性好：几乎所有浏览器都支持，包括一些古老浏览器。
  • 简单易用：对于简单的多列布局，代码编写相对容易。
• 劣势：
  • 脱离文档流：可能导致父元素高度塌陷，需要额外处理。
  • 复杂布局困难：处理复杂布局时，例如不规则排列、垂直居中，代码量增加且难以维护。
• 适用场景：简单的图文混排，如新闻列表中图片与文字的排版，或者简单的两列布局，一侧是导航栏另一侧是内容区。

Flexbox布局

• 特点：通过弹性容器和弹性项目来灵活布局，可方便控制项目的排列方向、对齐方式等。
• 优势：
  • 灵活强大：能够轻松实现复杂的多列布局，如水平垂直居中、自适应布局等。
  • 不脱离文档流：父元素高度不会因子元素布局而塌陷。
• 劣势：
  • 兼容性相对弱：一些较老版本浏览器支持不佳。
  • 代码复杂：对于复杂布局，代码量虽可能比浮动少，但理解和调试有一定难度。
• 适用场景：现代网页设计中需要复杂排列和自适应的多列布局，如电商产品展示页面，需要不同商品图片与描述信息按不同方式排列展示；或者需要在不同屏幕尺寸下灵活调整布局的响应式设计。