下面是深度理解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;}

示例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 元素不再影响父容器的高度。