css 浮动

CSS 浮动（Float）属性用于创建浮动框，将其移动到一边，使其周围的内容环绕。浮动框可以是左浮动（float: left;）或右浮动（float: right;）。

解决浮动带来的父元素高度塌陷问题的常用方法有：

以下是一个简单的 clearfix 实现示例：




/* Clearfix */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}




<!-- 父元素 -->
<div class="parent clearfix">
  <!-- 子元素 -->
  <div class="child" style="float: left;">左浮动内容</div>
  <!-- 清除浮动 -->
</div>

使用这个 clearfix 类可以防止父元素高度塌陷，确保父元素包含所有浮动的子元素。