CSS：为什么要清除浮动、清除浮动的本质、策略、清除浮动之额外标签法

听海边涛声

已于 2024-07-18 19:47:40 修改

阅读量258

点赞数 3

文章标签： css 前端

于 2024-07-17 09:05:07 首次发布

本文链接：https://blog.csdn.net/panghuangang/article/details/140473723

版权

为什么要清除浮动

说明

由于父级盒子在很多情况下，是不方便给高度的，但是子盒子浮动又不占有位置，最后父级盒子高度为0，就会影响下面的标准流盒子。

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。

示例

下面示例中，父盒子.box没有给高度，它的两个子盒子.one和.two都是左浮动，父盒子下面有个兄弟盒子.footer没有设置浮动，属于标准流。导致父盒子.box高度为0，下面的兄弟盒子.footer占用了位置：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 800px;
      border: 1px solid blue;
      margin: 0 auto;
    }

    .one {
      float: left;
      width: 300px;
      height: 200px;
      background-color: purple;
    }

    .two {
      float: left;
      width: 200px;
      height: 200px;
      background-color: pink;
    }

    .footer {
      height: 200px;
      background-color: green;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="one">子盒子1</div>
    <div class="two">子盒子2</div>
  </div>
  <div class="footer"></div>
</body>

</html>

清除浮动本质

清除浮动的本质就是清除浮动元素脱离标准流造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

语法：

选择器{clear: 属性值;}

可以取的属性值（但在实际开发中，几乎只用 clear: both;）：

left：不允许左侧有浮动元素（清除左侧浮动的影响）
right：不允许右侧有浮动元素（清除右侧浮动的影响）
both：同时清除左右浮动的影响

清除浮动的策略

清除浮动的策略是：闭合浮动，即，只让浮动在父盒子内部影响，不影响父盒子外面的其它盒子。

清除浮动的方法

额外标签法（也称隔墙法）
父级添加overflow属性
父级添加after伪元素
父级添加双伪元素

清除浮动的方式	优点	优点
额外标签法（也称隔墙法）	通俗易懂，书写方便	增加了许多无意义的标签，结构化差
父级元素增加`overflow:hidden;`样式	书写方便	溢出隐藏
父级元素增加after伪元素	结构语义化	对IE6-7要做兼容处理
父级元素增加双伪元素	结构语义化	对IE6-7要做兼容处理

实际开发中，后三种方式用得多一些。

额外标签法（也称隔墙法）

说明

额外标签法（也称隔墙法），是W3C推荐的做法。实际工作中不常用这种方法。

额外标签法会在浮动元素末尾添加一个空的额外标签，添加清除浮动样式。例如<div style="clear: both;"></div> ，或者它标签，如<br />等。

注意：要求这个新的空标签必须是块级元素，不能是行内元素。

这种方法的优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差。

示例：在浮动元素末尾增加div空标签

例如：
在这里插入图片描述

完整示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 800px;
      border: 1px solid blue;
      margin: 0 auto;
    }

    .one {
      float: left;
      width: 300px;
      height: 200px;
      background-color: purple;
    }

    .two {
      float: left;
      width: 200px;
      height: 200px;
      background-color: pink;
    }

    .footer {
      height: 200px;
      background-color: green;
    }

    .clear {
      clear: both;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="one">子盒子1</div>
    <div class="two">子盒子2</div>
    <div class="clear"></div>
  </div>
  <div class="footer"></div>
</body>

</html>

在这里插入图片描述

示例：多个浮动子盒子，父盒子的高度跟随变化

展示效果：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 800px;
      border: 1px solid blue;
      margin: 0 auto;
    }

    .one {
      float: left;
      width: 300px;
      height: 200px;
      background-color: purple;
    }

    .two {
      float: left;
      width: 200px;
      height: 200px;
      background-color: pink;
    }

    .footer {
      height: 200px;
      background-color: green;
    }

    .clear {
      clear: both;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="one">子盒子1</div>
    <div class="two">子盒子2</div>
    <div class="two">子盒子2</div>
    <div class="two">子盒子2</div>
    <div class="two">子盒子2</div>
    <div class="two">子盒子2</div>
    <div class="clear"></div>
  </div>
  <div class="footer"></div>
</body>

</html>

示例：在浮元素末尾增加的空标签不是块级元素，清除浮动不起作用

在这里插入图片描述

展示效果：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 800px;
      border: 1px solid blue;
      margin: 0 auto;
    }

    .one {
      float: left;
      width: 300px;
      height: 200px;
      background-color: purple;
    }

    .two {
      float: left;
      width: 200px;
      height: 200px;
      background-color: pink;
    }

    .footer {
      height: 200px;
      background-color: green;
    }

    .clear {
      clear: both;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="one">子盒子1</div>
    <div class="two">子盒子2</div>
    <div class="two">子盒子2</div>
    <div class="two">子盒子2</div>
    <div class="two">子盒子2</div>
    <div class="two">子盒子2</div>
    <!-- <div class="clear"></div> -->
    <span class="clear"></span>
  </div>
  <div class="footer"></div>
</body>

</html>