深度理解CSS clear-both的使用

下面是深度理解CSS clear:both的使用的完整攻略。

什么是clear:both

clear:both 是 CSS 中的一个清除浮动的属性。在使用 float 进行布局时，可能会出现父容器高度塌陷的问题，clear:both 的作用就是清除浮动元素对于父元素高度产生的影响。

如何使用clear:both

在 HTML 中，我们可以使用以下样式对某个元素应用 float 属性：

.float-left {
  float: left;
}

当该元素应用了 float 属性后，其父元素的高度可能会由于浮动元素的原因产生问题。这时我们可以使用 clear:both 来清除浮动元素的影响，代码如下：

.clearfix::after {
  content: ".";
  height: 0;
  display: block;
  clear: both;
  visibility: hidden;
}
.clearfix {
  zoom: 1;
}

以上代码是清除浮动影响的一个常用技巧，我们使用 ::after 伪元素的方式在浮动元素的后面添加一段空内容，再利用 clear:both 清除浮动影响。同时为了使该技巧适用于旧版 IE，我们使用 zoom:1 来让该元素成为一个块级元素，从而使得 ::after 伪元素在 IE 中生效。

示例1：清除左侧浮动影响

我们来看一下使用 clear:both 来清除左侧浮动影响的示例：

.container {
  border: 1px solid gray;
  overflow: hidden;
}
.box {
  float: left;
  width: 50px;
  height: 50px;
  background-color: blue;
  margin: 10px;
}

在这个例子中，我们创建了一个 .container 容器和两个 .box 元素，其中 .box 元素都应用了 float: left 属性。如果不清除浮动影响，.container 容器就会出现高度塌陷的问题。我们通过以下代码来清除左侧浮动影响：

.container::after {
  content: ".";
  height: 0;
  display: block;
  clear: left;
  visibility: hidden;
}

通过上述代码我们可以成功地清除浮动影响，使得 .container 容器中的 .box 元素不再影响父容器的高度。

示例2：清除右侧浮动影响

这次我们来看一下使用 clear:both 来清除右侧浮动影响的示例：

.container {
  border: 1px solid gray;
  overflow: hidden;
}
.box {
  float: right;
  width: 50px;
  height: 50px;
  background-color: blue;
  margin: 10px;
}

在这个例子中，我们同样创建了一个 .container 容器和两个 .box 元素，但是这次 .box 元素都应用了 float: right 属性。同样地，如果不清除浮动影响，.container 容器仍然会出现高度塌陷的问题。我们通过以下代码来清除右侧浮动影响：

.container::after {
  content: ".";
  height: 0;
  display: block;
  clear: right;
  visibility: hidden;
}

通过上述代码我们同样可以成功地清除浮动影响，使得 .container 容器中的 .box 元素不再影响父容器的高度。

以上就是深度理解 CSS clear:both 的使用的完整攻略，希望能对您有所帮助。