CSS 布局 - 清除

清除的属性

当我们使用float属性，并且我们想要下面的下一个元素（不在右侧或左侧），我们将不得不使用clear属性。

这个clear属性指定浮动元素旁边的元素应该发生什么。

这个clear属性可以具有以下值之一：

清除浮动时，应将清除与浮动相匹配：如果元素向左浮动，则应向左清除。您的浮动元素将继续浮动，但清除的元素将出现在网页上的下方。

此示例清除左侧的浮动。这里，这意味着 <div2> 元素被推到左侧浮动的 <div1> 元素下方：

div1 {
float: left;
}

div2 {
clear: left;
}

如果浮动元素比包含元素高，它将 "overflow" 超出其容器。然后我们可以添加一个clearfix hack来解决这个问题：

.clearfix {
overflow: auto;
}

这个overflow: auto只要您能够控制边距和填充（否则您可能会看到滚动条），clearfix 就可以很好地工作。这新的、现代的clearfix hack但是使用起来更安全，大多数网页都使用以下代码：

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

您将了解更多关于::after伪元素将在后面的章节中介绍。