什么是CSS规则“clear：both”的作用？

CSS中有一条规则叫做“clear：both”，可能很多人都听说过，但对于它的作用和原理还是有些困惑的。那么，“clear：both”到底是什么意思？它有什么作用？在什么情况下需要使用它呢？

“clear：both”的含义

在了解“clear：both”的作用之前，我们需要先了解一下什么是浮动（float）。在CSS中，浮动是指将一个元素从文档流中拿出来，放置在父元素的左边或右边，让它们在同一行内排列。浮动是网页布局中常用的一种方式，可以很好地实现页面元素的自适应排列。比如下面这个例子：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      float: left;
      width: 100px;
      height: 100px;
      background: #007bff;
      margin-right: 10px;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</body>
</html>

上面这段代码设置了一个宽为100px，高为100px，背景颜色为蓝色的盒子，并通过float: left;的方式将它们在同一行内左对齐排列。运行代码，效果如下：

但是，浮动布局也带来了一些问题。当一个元素浮动之后，会脱离文档流，而其父元素的高度无法自适应包含浮动元素的情况，导致父元素的高度可能变得很小，甚至为0，造成布局错乱。比如下面这个例子：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      float: left;
      width: 100px;
      height: 100px;
      background: #007bff;
      margin-right: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</body>
</html>

上面这段代码将3个宽为100px，高为100px的盒子放置在一个名为container的父元素里。运行代码，发现container元素的高度变得很小，3个盒子都溢出了容器。

这时就需要用到“clear：both”了。首先，我们来看一下“clear”属性：

clear: none | left | right | both;

clear属性指定元素边框以下不允许出现浮动框。其取值如下：

none：元素整体不受浮动影响，容许浮动框出现在两侧。
left：元素的左侧不允许出现浮动框，设置后元素将被强制换行，紧挨着左边距边界显示。
right：元素的右侧不允许出现浮动框，设置后元素将被强制换行，紧挨着右边距边界显示。
both：元素的两侧都不允许出现浮动框，设置后元素将被强制换行。

其中，“clear：both”表示元素的左右两侧都不允许出现浮动框，即清除浮动。

“clear：both”的作用

回到上面的例子中，我们可以通过在container元素上设置“clear：both”，使其包含浮动元素。修改代码如下：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      float: left;
      width: 100px;
      height: 100px;
      background: #007bff;
      margin-right: 10px;
    }
    .container {
      clear: both;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</body>
</html>

运行代码，发现盒子已经正常包含在了container元素内部。

为什么要设置“clear：both”呢？这是因为当父元素不设置高度时，它的高度是由子元素的高度撑开的。而当一个元素浮动时，它会脱离文档流，父元素就无法计算它的高度，导致父元素的高度变小，这时就需要用到“clear：both”，将浮动元素包含在父元素内部，使父元素的高度自适应。

“clear：both”的应用

除了在布局中使用“clear：both”以外，它还可以用来清除浮动造成的影响，以及占位符的作用。下面分别介绍一下。

清除浮动造成的影响

在浮动元素内部，如果包含了子元素，那么子元素也会跟随父元素浮动。比如下面这段代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      float: left;
      width: 100px;
      height: 100px;
      background: #007bff;
      margin-right: 10px;
    }
    .container {
      border: 1px solid #ddd;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">
      <p>hello world</p>
    </div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</body>
</html>

上面这段代码中，第一个盒子包含了一个段落元素。运行代码，发现段落元素跟随盒子一起浮动了。

这时，我们可以在浮动元素的结束标签后插入一个空的<div>元素，然后给这个<div>元素设置“clear：both”，来清除浮动造成的影响。修改代码如下：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      float: left;
      width: 100px;
      height: 100px;
      background: #007bff;
      margin-right: 10px;
    }
    .container {
      border: 1px solid #ddd;
      padding: 10px;
    }
    .clear {
      clear: both;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">
      <p>hello world</p>
    </div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="clear"></div>
  </div>
</body>
</html>

运行代码，发现段落元素已经恢复到了正常的位置。

占位符的作用

有时候我们需要在文档中留下一个空白占位符，比如用来占据一定的高度或宽度，但又不想使用空的文本或者空格的方式来实现，这时我们可以用一个空的<div>元素，然后给它设置“clear：both”，这个元素就能占据一定的高度，同时也不会对布局造成干扰。比如下面这个例子：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      float: left;
      width: 100px;
      height: 100px;
      background: #007bff;
      margin-right: 10px;
    }
    .placeholder {
      clear: both;
      height: 200px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="placeholder"></div>
</body>
</html>

上面这段代码设置了一个高为200px的空<div>元素，并将其放在3个浮动元素之后。运行代码，发现空元素占据了一定的高度，同时也不影响页面布局。

结论

总的来说，“clear：both”是用来清除浮动造成的影响和包含浮动元素的作用，而在布局中使用时，通常是用来使父元素包含浮动元素，以便使父元素的高度自适应，或者清除浮动带来的副作用。同时，我们还可以利用空的<div>元素和“clear：both”来实现占位符的效果，以便在页面布局中留下空白区域，而不会对页面布局造成干扰。