css三种基本布局方式：CSS三种基本布局方式指南，从传统流式到弹性盒布局

传统流式布局（Normal Flow）

原理
传统流式布局是CSS的默认布局方式，元素按照HTML中的顺序从上到下、从左到右排列，块级元素（如<div>、<p>）独占一行，行内元素（如<span>、<a>）则在行内排列。

代码示例

<div class="container">
  <div class="header">Header</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

.container {
  width: 100%;
}
.header, .footer {
  height: 50px;
  background: #333;
  color: white;
}
.content {
  background: #f0f0f0;
  padding: 20px;
}

优点

• 简单易用，无需额外代码
• 浏览器默认支持，兼容性好

缺点

• 固定高度布局在响应式设计中表现不佳
• 复杂布局（如多列等高布局）难以实现

浮动布局（Float Layout）

原理
通过float属性将元素脱离文档流，并使其向左或向右移动，常用于实现图文环绕、多列布局等，配合clear属性清除浮动,避免布局塌陷。

代码示例

<div class="container">
  <div class="box float-left">Left</div>
  <div class="box float-right">Right</div>
  <p>This is a paragraph that wraps around the floated elements.</p>
</div>

.box {
  float: left;
  width: 30%;
  margin: 10px;
  background: #e0e0e0;
}
.container::after {
  content: "";
  display: table;
  clear: both;
}

优点

• 曾是实现复杂布局的主要手段
• 适合传统图文混排场景

缺点

• 代码复杂，容易引发布局问题
• 在响应式设计中逐渐被淘汰

弹性盒布局（Flexbox）

原理
弹性盒布局（Flexbox）是现代CSS布局的重要解决方案，通过display: flex将容器设置为弹性盒，内部元素（flex项目）可以自动调整大小和顺序,实现灵活的对齐和分布。

代码示例

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  display: flex;
  justify-content: space-between; /* 水平分布 */
  align-items: center; /* 垂直居中 */
}
.item {
  flex: 1; /* 平均分配空间 */
  margin: 10px;
  background: #4caf50;
  color: white;
}

优点

• 简化复杂布局，代码简洁
• 完美支持响应式设计
• 浏览器兼容性良好（现代浏览器）

缺点

• 对于超复杂布局（如网格布局）可能不够灵活

总结对比