什么是CSS中的浮动包含？

在CSS布局中，浮动是一种常用的布局方式。当元素浮动时，它的位置相对于它的父元素来定位。在浮动元素周围形成一个空白区域，其他元素可以在该区域内布局。

CSS中的浮动包含就是指容器的高度包含了浮动的元素。浮动元素不再脱离文档流，而是正常地流入父元素中。

浮动元素对于父元素的影响

浮动元素对于父元素的影响主要有两点：

父元素高度不再包含浮动元素
父元素的宽度被浮动元素占据

父元素高度不再包含浮动元素

下面的代码演示了当子元素浮动时，父元素的高度不再包含浮动元素。

<div class="parent">
  <div class="child"></div>
</div>

<style>
.parent {
  background-color: #ccc;
  height: 100px;
  border: 1px solid #000;
}
.child {
  background-color: #333;
  width: 50px;
  height: 50px;
  float: left;
}
</style>

上面的代码中，父元素设置了100像素的高度，子元素浮动到左侧。运行代码后，可以看到父元素的高度只有1像素。这是因为浮动元素脱离了文档流，不再占用空间。

可以通过清除浮动的方式解决这个问题。例如，可以在父元素之后添加一个空的div元素，并设置clear:both。

<div class="parent">
  <div class="child"></div>
  <div style="clear: both;"></div>
</div>

父元素的宽度被浮动元素占据

下面的代码演示了当子元素浮动时，父元素的宽度被子元素占据。

<div class="parent">
  <div class="child"></div>
  <div class="other"></div>
</div>

<style>
.parent {
  background-color: #ccc;
  border: 1px solid #000;
}
.child {
  background-color: #333;
  width: 50px;
  height: 50px;
  float: left;
}
.other {
  background-color: #999;
  width: 100px;
  height: 50px;
  float: left;
}
</style>

上面的代码中，父元素包含了一个浮动元素和一个非浮动元素。子元素设置了50像素的宽度，非浮动元素设置了100像素的宽度。运行代码后，可以看到父元素的宽度只有150像素，而不是250像素。

可以通过在父元素上添加overflow: auto的方式解决这个问题。这样会创建一个新的块级格式化上下文，使父元素包含浮动元素。

<div class="parent">
  <div class="child"></div>
  <div class="other"></div>
</div>

<style>
.parent {
  background-color: #ccc;
  border: 1px solid #000;
  overflow: auto;
}
.child {
  background-color: #333;
  width: 50px;
  height: 50px;
  float: left;
}
.other {
  background-color: #999;
  width: 100px;
  height: 50px;
  float: left;
}
</style>

浮动包含

浮动包含是指父元素的高度自动包含浮动元素。在css中，浮动元素脱离了常规文档流（但仍然受它的父元素的限制），因此不会撑开父元素。

下面的代码演示了包含浮动元素的方式：

<div class="parent">
  <div class="child"></div>
</div>

<style>
.parent {
  background-color: #ccc;
  border: 1px solid #000;
  /* 包含浮动元素 */
  overflow: auto;
}
.child {
  background-color: #333;
  width: 50px;
  height: 50px;
  float: left;
}
</style>

上面的代码中，父元素使用了overflow: auto，使得它的高度被子元素包含，不会脱离文档流。