CSS浮动属性设置与清除浮动方法完全指南

来源：IPIPP.com作者：陈平安时间：05-15

导读：本期聚焦于小伙伴创作的《CSS浮动属性设置与清除浮动方法完全指南》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《CSS浮动属性设置与清除浮动方法完全指南》有用，将其分享出去将是对创作者最好的鼓励。

HTML元素怎么设置浮动效果：HTML元素浮动的CSS属性及清除方法

在网页布局开发过程中，浮动是早期常用的布局手段之一，合理设置浮动可以让多个块级元素横向排列，实现多栏布局等效果。本文会详细介绍HTML元素设置浮动效果的CSS属性，以及常见的浮动清除方法，帮助开发者快速掌握浮动相关的使用技巧。

一、浮动的核心CSS属性

设置HTML元素浮动效果的核心属性是float，该属性可以设置元素向左侧或右侧浮动，浮动后的元素会脱离标准文档流，相邻的未浮动元素会围绕浮动元素排列。float属性的常用取值如下：

left：元素向左浮动
right：元素向右浮动
none：元素不浮动，默认值
inherit：继承父元素的float属性值

二、浮动的设置示例

下面通过一个简单的示例代码，展示如何为HTML元素设置浮动效果，实现三个div横向排列的布局：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>浮动效果示例</title>
  <style>
    /* 容器样式 */
    .container {
      width: 800px;
      margin: 0 auto;
      border: 2px solid #333;
      padding: 10px;
    }
    /* 浮动元素公共样式 */
    .float-item {
      width: 200px;
      height: 150px;
      margin: 10px;
      text-align: center;
      line-height: 150px;
      color: #fff;
      font-size: 18px;
    }
    /* 第一个元素左浮动 */
    .item1 {
      float: left;
      background-color: #f56c6c;
    }
    /* 第二个元素左浮动 */
    .item2 {
      float: left;
      background-color: #409eff;
    }
    /* 第三个元素右浮动 */
    .item3 {
      float: right;
      background-color: #67c23a;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="float-item item1">左浮动元素1</div>
    <div class="float-item item2">左浮动元素2</div>
    <div class="float-item item3">右浮动元素3</div>
  </div>
</body>
</html>

上述代码中，我们给前两个div设置了float: left，第三个div设置了float: right，最终三个元素会在容器内横向排列，前两个靠左，第三个靠右。需要注意的是，浮动元素会脱离标准文档流，如果没有给父容器设置高度，父容器的高度会塌陷，这是因为浮动元素不再占据文档流中的空间，父容器无法感知浮动元素的高度。

三、浮动带来的问题：高度塌陷

当父元素没有设置固定高度，且内部子元素全部浮动时，父元素的高度会变为0，这就是常说的高度塌陷问题，会导致父元素边框无法包裹子元素、后续布局错乱等问题。我们可以通过下面的代码直观看到这个现象：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>高度塌陷示例</title>
  <style>
    .parent {
      width: 600px;
      border: 3px solid #f00; /* 红色边框方便观察 */
      margin: 20px auto;
    }
    .child {
      width: 200px;
      height: 100px;
      float: left;
      background-color: #ccc;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">浮动子元素1</div>
    <div class="child">浮动子元素2</div>
  </div>
</body>
</html>

运行上述代码后，你会发现父元素的红色边框只显示为一条细线，因为父元素高度为0，无法包裹住两个浮动的子元素，这就是需要清除浮动的核心原因。

四、常见的浮动清除方法

针对浮动带来的高度塌陷等问题，有多种清除浮动的方法，开发者可以根据实际场景选择合适的方式。

1. 额外标签法（clear属性）

在浮动元素的最后添加一个空的块级标签，给这个标签设置clear: both属性，clear属性可以指定元素哪一侧不允许出现浮动元素，取值包括left、right、both、none、inherit，清除浮动常用clear: both。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>额外标签法清除浮动</title>
  <style>
    .parent {
      width: 600px;
      border: 3px solid #f00;
      margin: 20px auto;
    }
    .child {
      width: 200px;
      height: 100px;
      float: left;
      background-color: #ccc;
      margin: 10px;
    }
    /* 清除浮动的额外标签样式 */
    .clear-fix {
      clear: both;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">浮动子元素1</div>
    <div class="child">浮动子元素2</div>
    <div class="clear-fix"></div>
  </div>
</body>
</html>

这种方法的优点是简单易懂，兼容性好；缺点是需要添加无意义的空标签，不符合语义化要求，如果页面浮动较多，会添加大量冗余标签。

2. 父元素设置overflow属性

给浮动元素的父容器设置overflow: hidden或者overflow: auto，可以触发父元素的BFC（块级格式化上下文），BFC内部的浮动元素会被计算高度，从而解决高度塌陷问题。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>overflow清除浮动</title>
  <style>
    .parent {
      width: 600px;
      border: 3px solid #f00;
      margin: 20px auto;
      overflow: hidden; /* 触发BFC清除浮动 */
    }
    .child {
      width: 200px;
      height: 100px;
      float: left;
      background-color: #ccc;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">浮动子元素1</div>
    <div class="child">浮动子元素2</div>
  </div>
</body>
</html>

这种方法的优点是代码简洁，不需要额外添加标签；缺点是如果子元素内容超出父容器范围，会被隐藏（overflow: hidden）或者出现滚动条（overflow: auto），适用场景有限。

3. 伪元素清除法（推荐）

给父容器添加一个清除浮动的伪元素类，通过::after伪元素在父容器内部末尾添加一个不可见的内容，设置clear: both来清除浮动，这是目前业界最常用的清除浮动方式，兼容性好且不添加冗余标签。

/* 通用清除浮动类 */
.clearfix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
/* 兼容IE6、IE7 */
.clearfix {
  *zoom: 1;
}

使用时只需要给浮动元素的父容器添加clearfix类即可：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>伪元素清除浮动</title>
  <style>
    .clearfix::after {
      content: "";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
    .clearfix {
      *zoom: 1;
    }
    .parent {
      width: 600px;
      border: 3px solid #f00;
      margin: 20px auto;
    }
    .child {
      width: 200px;
      height: 100px;
      float: left;
      background-color: #ccc;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div class="parent clearfix">
    <div class="child">浮动子元素1</div>
    <div class="child">浮动子元素2</div>
  </div>
</body>
</html>

这种方法的优点是符合语义化要求，没有冗余标签，兼容性好，适合所有场景，也是目前最推荐的清除浮动方式。

五、浮动使用的注意事项

虽然浮动可以实现简单的横向布局，但随着Flex布局、Grid布局的普及，浮动已经不再是主流的布局手段，使用时需要注意以下几点：

浮动元素会脱离标准文档流，会影响后续元素的布局，使用完后一定要及时清除浮动
如果不需要兼容老旧浏览器，优先使用Flex或Grid布局实现横向排列，代码更简洁，维护成本更低
设置浮动的元素会生成块级框，即使元素本身是行内元素，浮动后也会变成块级元素，可以设置宽高

CSS浮动清除浮动高度塌陷伪元素清除法网页布局

免责声明：已尽一切努力确保本网站所含信息的准确性。网站部分内容来源于网络或由用户自行发表，内容观点不代表本站立场。本站是个人网站免费分享，内容仅供个人学习、研究或参考使用，如内容中引用了第三方作品，其版权归原作者所有。若内容触犯了您的权益，请联系我们进行处理。