CSS布局技巧汇总：浮动、定位、弹性盒子布局与实践应用

引言

在Web开发中，实现有效的页面布局是至关重要的一环。CSS提供了多种布局技巧，其中包括浮动、定位和弹性盒子布局等。本文将介绍这些技巧的应用场景以及实际操作实例，帮助您更好地掌握这些CSS布局方法，并且会着重讲解浮动布局为什么会被替代。

1. 浮动布局

浮动（float）是一种经典的CSS布局技巧，它允许元素在容器中脱离正常的文档流，使其能够在水平方向上并排排列。浮动的应用场景包括：

多列布局：通过将多个元素浮动到左侧或右侧，实现多列内容排列。
图像环绕：在文字周围浮动图像，使文字环绕图像展示。
网格布局的模拟：在缺乏现代网格布局的情况下，通过浮动实现网格状布局。

案例：

/* HTML */
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

/* CSS */
.container {
  width: 100%;
  overflow: auto; /* 清除浮动 */
}

.box {
  width: 30%;
  float: left;
  margin: 10px;
}

2. 定位布局

定位（position）允许您精确地控制元素在父容器中的位置。常用的定位属性有relative、absolute和fixed。定位布局的应用场景包括：

悬浮菜单：实现当用户滚动页面时保持菜单在屏幕特定位置。
工具提示：创建在鼠标悬停时出现的提示框。
自定义模态框：构建自定义的弹出式模态框。

案例

/* HTML */
<div class="container">
  <div class="box"></div>
  <div class="fixed"><div>
</div>

/* CSS */
.container {
  position: relative;
  width: 300px;
  height: 200px;
  background-color: black;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: white;
  transform: translate(-50%, -50%);
}
.fixed{
  position: fixed;
  bottom: 0px;
  width: 100vw;
  height: 60px;
  background-color: rgba(0,0,0,.8)
}

3. 弹性盒子布局

弹性盒子（Flexbox）是一种现代的CSS布局技术，它以容器与其内部元素之间的关系来实现布局。弹性盒子布局的应用场景包括：

灵活的对齐和分布：轻松实现元素的对齐、分布和排序。
响应式布局：在不同屏幕尺寸下，调整元素的排列方式和大小。
复杂布局结构：构建复杂的页面布局，如导航栏、侧边栏和内容区域的结合。

案例

/* HTML */
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

/* CSS */
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item {
  flex: 1;
  height: 100px;
}

为什么定位布局、弹性布局等布局方案会替代浮动布局？

浮动设计的初衷就不是为了页面布局，而是为了解决文字环绕图片问题，浮动后的元素就不会将文字挡住，接下来我们就聊聊它的缺点以及替代方案

浮动布局的缺点

浮动元素会脱离文档流，可能导致布局混乱，元素重叠或错位。
需要额外的技巧来清除浮动，以确保父元素正确包裹浮动元素。
浮动可能导致元素在布局中移动到与其实际语义不符的位置，影响可访问性和SEO。
创建响应式布局时需要额外调整，浮动元素可能在不同屏幕尺寸下表现不一致。
浮动元素可能导致性能问题，浏览器需要额外计算和绘制。
在多个块元素共存于一行后，在块元素的宽度无法达到父元素的宽度时，为了美观，会采用等距分隔或等距环绕设计对于这样的设计，则需要人为的，精确的计算块元素的外边距。由于浮动技术有很多的缺点，所以将会受到很大的冲击，它的对手将是弹性布局

主要替代方案——弹性布局

弹性布局主要作用是，设置父元素内的多个块元素的排列顺序以及分布方式。弹性布局与浮动相比，不但可以实现多个块元素共存于一行，而且对父元素没有不好的影响，同时实现子元素等距分隔，或等距环绕并不需要人为的计算。弹性布局会自动计算。

结论

浮动布局作为经典的技巧，虽然在一些特定的情况下能够实现多列布局、图像环绕等效果，但其在多个元素并排排列时容易导致清除浮动、外边距计算等问题。而弹性布局的出现，我们可以更加灵活地控制元素的对齐、分布和排序，实现响应式布局、复杂结构的设计，而无需过多的人为计算和清除浮动的麻烦。
定位布局则能够精确控制元素的位置，适用于悬浮菜单、工具提示等场景。弹性盒子布局则以其灵活的对齐和分布机制，在复杂的布局结构中表现出色。随着现代Web开发的要求越来越高，我们鼓励开发者们更多地探索和应用定位布局和弹性盒子布局，以创造更好的用户体验和更容易维护的代码。
我个人对于弹性布局甚是喜欢，在平常写项目使用的布局方案也是弹性布局，在一些特殊布局场景上也会搭配定位布局一起使用，基本上可以解决大部分的页面布局场景，如果我写的哪里有问题或者有什么建议欢迎大家在评论区一起讨论

CSS布局技巧汇总：浮动、定位、弹性盒子布局与实践应用 ｜ 青训营