现代CSS中的换行布局技术

在现代网页设计中，为了适应不同屏幕尺寸和设备类型，换行布局是一项重要的技术。通过合适的布局技术，我们可以实现内容的自适应和优雅的排版。本文将介绍CSS中几种常见的换行布局技术，探索它们的属性、代码示例和解析，帮助开发人员更好地掌握这些技术。

1. 流动布局 (Flow Layout)

流动布局是最基本和常见的布局技术之一。它使用默认的流动行为，元素在水平方向上依次排列，并在达到容器边界时换行。以下是一些常用的属性用于流动布局：

• display: block;：将元素显示为块级元素，使其在一行独占一个水平空间。

• display: inline;：将元素显示为行内元素，使其在一行内水平排列。

下面是一个基本的流动布局示例：

.container {
  width: 100%;
}

.item {
  display: block;
  width: 50%;
}

在上述示例中，.container是父容器，.item是子元素。通过将子元素的宽度设置为50%，两个子元素将在同一行上水平排列，并在父容器的边界处换行。