css 解决浮动塌陷与弹性盒子

1、css布局

css中浮动（Float）和弹性盒子（Flexbox）都是种布局技术，用于控制元素在页面中的位置，

2、浮动（Float）

浮动（Float）：基于传统的文档流布局，元素脱离文档流并根据浮动属性移动位置，在容器周围形成文字环绕效果，但可能会导致父容器塌陷和清除浮动的处理问题。

语法

float:属性值;

浮动元素的常见属性值有：

left：元素向左浮动，周围的内容将环绕在右侧。
right：元素向右浮动，周围的内容将环绕在左侧。
none：默认值，元素不浮动，按照正常的文档流排列。

3、浮动塌陷

浮动塌陷：
浮动元素会从正常的文档流中脱离，并且其周围的元素会根据浮动元素的位置进行布局。当父元素包含浮动元素时，父元素的高度并不会自动撑开以容纳浮动元素，而是将其内容区域的高度设置为0，这就是浮动塌陷。

当一个父元素包含浮动元素时，可能会发生浮动塌陷。下面是一个简单的例子：

<style>
  .container {
    background-color: lightblue;
    border: 1px solid black;
  }
  
  .float-box {
    float: left;
    width: 100px;
    height: 100px;
    background-color: orange;
    margin: 10px;
  }
</style>

<div class="container">
  <div class="float-box"></div>
  <div class="float-box"></div>
  <div class="float-box"></div>
</div>

在这个例子中，.container是一个父元素，它包含了三个浮动元素.float-box。由于浮动元素脱离了正常的文档流，并且父元素没有正确地包裹浮动元素，所以父元素的高度将塌陷为0，背景颜色和边框无法正确显示。

要解决这个问题
1、可以使用clearfix清除浮动。在父元素上添加以下CSS样式即可：

.container::after {
  content: "";
  display: table;
  clear: both;
}

通过使用伪元素::after以及设置clear: both;属性，创建了一个新的块级格式化上下文（BFC），使父元素正确地包裹浮动元素，从而修复了浮动塌陷问题。

2. 使用空的块级元素清除浮动：在包含浮动元素的父元素的末尾插入一个空的块级元素，并给它设置 clear: both; 属性。示例如下：

<div style="clear: both;"></div>

3. 使用overflow属性：通过将包含浮动元素的父元素设置为具有非visible的overflow属性，可以触发BFC（块级格式化上下文）并清除浮动。示例如下：

.container {
  overflow: hidden;
}

4. 使用display属性：使用弹性布局或网格布局时，父元素会自动清除内部浮动。将包含浮动元素的父元素设置为 display: flex; 或 display: grid; 可以清除浮动。示例如下：

.container {
  display: flex; /* 或 display: grid; */
}

这些方法中的选择取决于具体的布局和设计需求。根据实际情况，选择最合适的清除浮动方法。

4、弹性盒子（Flexbox）

弹性盒子（Flexbox）：专为灵活且自适应的布局而设计，通过在容器内部使用弹性属性来对齐、分布和排序元素。它的使用场景主要是在响应式布局、居中对齐、垂直居中等方面。

CSS弹性盒子（Flexbox）是一种用于页面布局的CSS模型，它提供了一种灵活而强大的方式来组织、对齐和分布元素。

使用Flexbox布局时，可以将容器元素设置为flex容器，并通过一些属性来定义其内部子元素（flex项）的行为。以下是Flexbox的一些关键属性：

1. display: flex;：将一个元素定义为flex容器，使其成为Flexbox布局的根容器。

2. flex-direction：指定flex项的排列方向。

   • row（默认值）：水平方向，从左到右排列。
   • row-reverse：水平方向，从右到左排列。
   • column：垂直方向，从上到下排列。
   • column-reverse：垂直方向，从下到上排列。

3. justify-content：指定在主轴上如何对齐flex项，主轴是水平的

   • flex-start（默认值）：靠近主轴起始端对齐。
   • flex-end：靠近主轴末尾端对齐。
   • center：居中对齐。
   • space-between：在主轴上均匀分布flex项，首尾不留空隙。
   • space-around：在主轴上均匀分布flex项，首尾留有空隙。

4. align-items：指定在交叉轴上如何对齐flex项，交叉轴是垂直方向的。

   • stretch（默认值）：拉伸以填充整个交叉轴。
   • flex-start：靠近交叉轴起始端对齐。
   • flex-end：靠近交叉轴末尾端对齐。
   • center：居中对齐。

通过适当地组合和配置这些属性，可以实现各种复杂的布局需求。Flexbox具有自适应性和响应式特性，可以适应不同屏幕尺寸和设备。

需要注意的是，Flexbox并不适用于所有场景，一些复杂的布局可能需要结合其他CSS布局模型（如Grid）来实现。在选择使用Flexbox时，也需要考虑浏览器的兼容性和一些特殊情况下的行为。

下面是一个弹性盒子示例：

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

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: aqua;
}

.item {
   background-color: #1cb824;
  padding: 10px;
  margin: 5px;
}

在上述示例中，.container 是包含弹性盒子的容器元素。通过设置 display: flex;，该容器成为了一个弹性容器。

• flex-direction: column; 控制项目的排列方向为垂直列（从上到下）。
• justify-content: center; 将项目在主轴上居中对齐。
• align-items: center; 将项目在交叉轴上居中对齐。

.item 是弹性容器内的项目元素。背景色、内边距和外边距的样式可以根据需要进行调整。