css 浮动

作者：System 时间：2024年08月21日分类：所有,css3 字数：564

这篇文章距离上次修改已过434天，其中的内容可能已经有所变动。

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 类可以防止父元素高度塌陷，确保父元素包含所有浮动的子元素。