CSS 布局 - 清除浮动和clearfix
clear 属性
当我们使用 float 属性时，如果我们想要下一个元素在下面（而不是在右边或左边），我们就需要使用 clear 属性。
clear 属性指定了应该如何处理与浮动元素相邻的元素。
clear 属性可以取以下值之一：
-
none- 元素不会被推到左边或右边浮动元素的下方。这是默认值。 -
left- 元素被推到左边浮动元素的下方。 -
right- 元素被推到右边浮动元素的下方。 -
both- 元素被推到左边和右边浮动元素的下方。 -
inherit- 元素继承其父元素的 clear 值。
在清除浮动时，应该将 clear 值与 float 值匹配：如果一个元素浮动到左边，那么就应该清除左边。浮动元素将继续浮动，但清除的元素将出现在网页上它的下方。
示例
这个示例清除左边的浮动。在这里，它意味着 <div2> 元素被推到左边浮动 <div1> 元素的下方：
div1 {
float: left;
}
div2 {
clear: left;
}
自己试试 »
clearfix hack
如果浮动元素比包含元素高，它将“溢出”到其容器之外。我们可以添加一个 clearfix hack 来解决这个问题。
没有 Clearfix
有 Clearfix
只要你能控制外边距和内边距（否则你可能会看到滚动条），overflow: auto clearfix 就能很好地工作。然而，新的、现代的 clearfix hack 使用起来更安全，以下代码被大多数网页使用。
你将在后面的章节中学习更多关于 ::after 伪元素的内容。
