请写一段关于BFC自适应的代码一个盒子包含两个盒子

我们可以通过设置BFC来实现盒子的自适应。BFC即“块级格式化上下文”，是浏览器渲染页面时的一种格式化规则，它可以影响盒子的布局和渲染。

下面是一个包含两个盒子的示例代码：

HTML代码：

<div class="box">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

CSS代码：

.box {
  border: 1px solid #000;
  overflow: hidden; /* 设置BFC */
}

.box1 {
  float: left;
  width: 50%;
  height: 100px;
  background-color: #f00;
}

.box2 {
  float: left;
  width: 50%;
  height: 200px;
  background-color: #0f0;
}

在这个示例中，我们设置了一个名为“box”的盒子，它包含了两个子盒子“box1”和“box2”。为了实现自适应，我们给“box”盒子设置了“overflow: hidden;”，这样它就成为了一个BFC，可以影响子盒子的布局。

然后，我们给“box1”和“box2”盒子设置了“float: left;”，这样它们就可以在同一行内显示。为了让它们占据相等的宽度，我们给它们都设置了“width: 50%;”。同时，我们分别给它们设置了不同的高度，这样可以更清楚地看出它们的布局。

最后，我们给“box”盒子设置了一个边框，这样可以更好地显示出它的大小和形状。

通过以上代码，我们成功地实现了一个包含两个盒子的自适应布局。这种方法可以应用于更复杂的布局中，让我们的页面更灵活、更美观。