浮动

浮动布局是一种常见的 CSS 布局技巧，通过将元素从正常的文档流中脱离出来，使其能够在页面中自由地浮动。

浮动布局适用于创建多列布局、图文混排以及响应式设计等场景。

下面是一个使用浮动布局创建多列布局的示例代码：

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>

.container {
  width: 100%;
}

.column {
  float: left;
  width: 33.33%;
}

定位

定位布局是一种通过指定元素的位置来控制布局的技巧。常用的定位属性有 position: relative; 和 position: absolute; 。

定位布局适用于创建层叠效果、悬浮菜单以及绝对定位的元素等场景。

下面是一个使用定位布局创建悬浮菜单的示例代码：

<div class="container">
  <div class="menu">Menu</div>
  <div class="content">Content</div>
</div>

.container {
  position: relative;
}

.menu {
  position: absolute;
  top: 0;
  left: 0;
}

.content {
  margin-top: 30px;
}

弹性盒子

弹性盒子布局（Flexbox）是一种现代的 CSS 布局技巧，通过使用 display: 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;
  flex-wrap: wrap;
}

.item {
  flex: 1 0 33.33%;
}