css中浮动和Flex布局

在CSS中，浮动（Floats）和Flex布局（Flexbox）是两种不同的布局模型，它们有各自的特点和用途。

浮动（Floats）:

适用场景：浮动通常用于创建文本环绕图像的效果，或者用于创建一个类似于表格的布局，但不带有表格的所有限制。

.float-left {
  float: left;
}
 
.float-right {
  float: right;
}

<div class="float-left">左侧内容</div>
<div class="float-right">右侧内容</div>
<div>中间内容环绕两侧内容显示。</div>

Flex布局（Flexbox）:

适用场景：Flexbox 布局提供了一种更灵活的方式来对子元素进行排列、对齐和分配空间。它可以用于创建复杂的布局，比如响应式的列表、导航、二维布局等。

.flex-container {
  display: flex;
}
 
.flex-item {
  margin: 5px;
}

<div class="flex-container">
  <div class="flex-item">项目 1</div>
  <div class="flex-item">项目 2</div>
  <div class="flex-item">项目 3</div>
</div>

两者区别：

• 浮动元素会从文档流中移除，可能导致父元素的高度塌陷。Flex容器则可以自动调整其子元素的高度以包含浮动元素。
• Flex布局更容易控制子项目的对齐和空间分配，而浮动则需要额外的清除机制（比如使用clear属性）。
• Flex布局是CSS3的一部分，更加现代和强大，提供了更多的控制和灵活性。