清除浮动方法 | TryCoding.Fun

清除浮动方法

CSS 清除浮动的三种常用方式：clearfix、overflow、额外标签

问题

当子元素浮动后，父元素会发生高度塌陷。如何清除浮动，让父元素正确包裹浮动子元素？

解答

问题演示

<div class="parent">
  <div class="child">浮动元素</div>
</div>
<!-- 父元素高度为 0，无法包裹子元素 -->

<style>
.child {
  float: left;
  width: 200px;
  height: 100px;
  background: lightblue;
}
</style>

方法一：clearfix 伪元素（推荐）

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

/* 兼容 IE6/7 的完整写法 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
.clearfix {
  *zoom: 1; /* IE6/7 触发 hasLayout */
}

<div class="parent clearfix">
  <div class="child">浮动元素</div>
</div>

方法二：overflow

/* 触发 BFC，使父元素包裹浮动子元素 */
.parent {
  overflow: hidden; /* 或 auto */
}

<div class="parent">
  <div class="child">浮动元素</div>
</div>

方法三：额外标签

<div class="parent">
  <div class="child">浮动元素</div>
  <!-- 在浮动元素后添加空标签 -->
  <div style="clear: both;"></div>
</div>

完整示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .parent {
      border: 2px solid red;
      margin-bottom: 20px;
    }
    
    .child {
      float: left;
      width: 150px;
      height: 80px;
      background: lightblue;
      margin: 10px;
    }
    
    /* clearfix 方案 */
    .clearfix::after {
      content: "";
      display: block;
      clear: both;
    }
    
    /* overflow 方案 */
    .overflow-fix {
      overflow: hidden;
    }
  </style>
</head>
<body>
  <!-- 未清除浮动：父元素高度塌陷 -->
  <div class="parent">
    <div class="child">未清除</div>
  </div>
  
  <!-- clearfix 方案 -->
  <div class="parent clearfix">
    <div class="child">clearfix</div>
  </div>
  
  <!-- overflow 方案 -->
  <div class="parent overflow-fix">
    <div class="child">overflow</div>
  </div>
  
  <!-- 额外标签方案 -->
  <div class="parent">
    <div class="child">extra tag</div>
    <div style="clear: both;"></div>
  </div>
</body>
</html>

方法对比

方法	优点	缺点
clearfix	语义清晰，无副作用	需要额外 CSS
overflow	代码简洁	可能裁剪内容或出现滚动条
额外标签	简单直接	增加无意义 DOM

关键点

clearfix 是最佳实践：通过伪元素在浮动元素后插入清除块，不影响 DOM 结构
overflow 原理是触发 BFC：BFC 会包含内部浮动元素，但可能产生裁剪副作用
clear: both 的作用：让元素移动到之前所有浮动元素的下方
现代布局优先用 Flexbox/Grid：新项目建议直接使用 Flex 或 Grid，避免浮动布局