浮动元素问题与解决

CSS 浮动导致的布局问题及清除浮动的方法

问题

CSS 浮动元素会引起哪些问题？如何解决？

解答

浮动引起的问题

1. 父元素高度塌陷

<div class="parent" style="border: 2px solid red;">
  <div class="child" style="float: left; width: 100px; height: 100px; background: blue;"></div>
</div>
<!-- 父元素高度为 0，红色边框看不到内容 -->

2. 影响后续元素布局

<div class="float-box" style="float: left;">浮动元素</div>
<div class="normal-box">我会跑到浮动元素旁边，而不是下方</div>

解决方案

方案一：clearfix（推荐）

/* 最常用的清除浮动方法 */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

<div class="parent clearfix">
  <div class="child" style="float: left;"></div>
</div>

方案二：overflow 触发 BFC

.parent {
  overflow: hidden; /* 或 auto */
}

方案三：在浮动元素后添加空元素

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

方案四：父元素也浮动（不推荐）

/* 会影响父元素的布局，产生连锁反应 */
.parent {
  float: left;
}

完整示例

<!DOCTYPE html>
<html>
<head>
  <style>
    /* clearfix 方案 */
    .clearfix::after {
      content: "";
      display: block;
      clear: both;
    }

    .container {
      border: 2px solid #333;
      margin-bottom: 20px;
    }

    .box {
      float: left;
      width: 100px;
      height: 100px;
      margin: 10px;
      background: #4a90d9;
    }
  </style>
</head>
<body>
  <!-- 使用 clearfix 清除浮动 -->
  <div class="container clearfix">
    <div class="box"></div>
    <div class="box"></div>
  </div>

  <p>这段文字正常显示在容器下方</p>
</body>
</html>

关键点

浮动元素脱离文档流，导致父元素高度塌陷
clearfix 伪元素是最通用的解决方案
overflow: hidden 通过创建 BFC 来包含浮动
现代布局优先使用 Flexbox 或 Grid，避免浮动问题
clear: both 清除左右两侧浮动的影响