CSS 布局 - clear 和 clearfix
clear 属性
当我们使用 float 属性，并且我们希望下一个元素位于下方（而不是右侧或左侧）时，我们必须使用 clear 属性。
clear 属性指定浮动元素旁边的元素应该如何处理。
clear 属性可以有以下值之一
-
none- 元素不会被推到左侧或右侧浮动元素的下方。这是默认值。 -
left- 元素被推到左侧浮动元素的下方。 -
right- 元素被推到右侧浮动元素的下方。 -
both- 元素被推到左侧和右侧浮动元素的下方。 -
inherit- 元素继承其父元素的 clear 值。
在清除浮动时，您应该使 clear 与 float 匹配：如果一个元素向左浮动，那么您应该向左清除。您的浮动元素将继续浮动，但清除的元素将出现在其下方。
示例
此示例清除了左浮动。在这里，这意味着 <div2> 元素被推到左浮动 <div1> 元素的下方：
div1 {
float: left;
}
div2 {
clear: left;
}
自己动手试一试 »
清除浮动技巧
如果浮动元素高于其包含元素，它将“溢出”其容器。我们可以添加一个 clearfix hack 来解决这个问题。
没有清除浮动
有清除浮动
overflow: auto clearfix 在您能够控制边距和填充（否则您可能会看到滚动条）的情况下工作良好。然而，**新的、现代的 clearfix hack** 更安全，以下代码用于大多数网页。
您将在后面的章节中了解更多关于 ::after 伪元素的信息。
