CSS中浮动和高度坍塌CSS关浮动和高度坍塌 1. 浮动（Float）描述：浮动是一种布局方式，用于使元素在容器中脱离

CSS关浮动和高度坍塌

描述：浮动是一种布局方式，用于使元素在容器中脱离正常的文档流，使其能够向左或向右漂浮。值：left（向左浮动）, right（向右浮动）

浮动元素不占据文档流中的位置，文本和其他元素会环绕浮动元素。用于实现多列布局，例如多列文本或图片布局。可以用于实现响应式布局，让元素在不同屏幕大小下自动调整位置。

浮动元素脱离了文档流，可能会导致父元素的高度坍塌，需要注意清除浮动。浮动元素会覆盖非浮动元素，需要注意z-index属性来控制元素的层级。浮动元素的宽度默认为其内容的宽度，需要设置宽度属性来调整元素的宽度。

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

<div class="clearfix">
  <div class="float-left">浮动元素</div>
  <div class="float-left">浮动元素</div>
</div>

.float-left {
  float: left;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

<div class="clearfix">
  <div class="float-left">浮动元素</div>
  <div class="float-left">浮动元素</div>
</div>

.container {
  float: left;
}

.container {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
}

.container {
  overflow: hidden; /* 或其他属性，例如overflow: auto; */
}