CSS 布局 - clear 和 clearfix
clear 属性
clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。
clear 属性可设置以下值之一：
- none - 允许两侧都有浮动元素。默认值
- left - 左侧不允许浮动元素
- right- 右侧不允许浮动元素
- both - 左侧或右侧均不允许浮动元素
- inherit - 元素继承其父级的 clear 值
使用 clear 属性的最常见用法是在元素上使用了 float 属性之后。
在清除浮动时，应该对清除与浮动进行匹配：如果某个元素浮动到左侧，则应清除左侧。您的浮动元素会继续浮动，但是被清除的元素将显示在其下方。
下例将清除向左的浮动。表示在（div 的）左侧不允许出现浮动元素：
<!DOCTYPE html><html><head><style>.div1 {float: left;width: 100px;height: 50px;margin: 10px;border: 3px solid #73AD21;}.div2 {border: 1px solid red;}.div3 {float: left;width: 100px;height: 50px;margin: 10px;border: 3px solid #73AD21;}.div4 {border: 1px solid red;clear: left;}</style></head><body><h1>不使用 clear</h1><div class="div1">div1</div><div class="div2">div2 - 请注意，在 HTML 代码中 div2 在 div1 之后。不过，由于 div1 向左浮动，div2 中的文本会流动到 div1 周围。</div><br><br><h1>使用 clear</h1><div class="div3">div3</div><div class="div4">div4 - 在此处，clear: left; 把 div4 移动到浮动的 div3 下方。值 "left" 会清除向左浮动的元素。您也可以清除 "right" 和 "both"。</div></body></html>
clearfix Hack
如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外：
然后我们可以向包含元素添加 overflow: auto;，来解决此问题：
<!DOCTYPE html><html><head><style>div {border: 3px solid #4CAF50;padding: 5px;}.img1 {float: right;}.clearfix {overflow: auto;}.img2 {float: right;}</style></head><body><h1>Clearfix</h1><p>在本例中，图像高于包含它的元素，然而它被浮动了，所以它会在容器之外溢出：</p><div><img class="img1" src="/images/pineapple.jpg" width="170" height="170">菠萝（学名：Ananas comosus），菠萝是凤梨的俗称，属热带水果之一。有70多个品种，岭南四大名果之一。</div><p style="clear:right">请为包含元素添加一个带有 overflow: auto; 的 clearfix 类，以解决此问题：</p><div class="clearfix"><img class="img2" src="/images/pineapple.jpg" width="170" height="170">菠萝（学名：Ananas comosus），菠萝是凤梨的俗称，属热带水果之一。有70多个品种，岭南四大名果之一。</div></body></html>
只要您能够控制外边距和内边距（否则您可能会看到滚动条），overflow: auto clearfix 就会很好地工作。但是，新的现代 clearfix hack 技术使用起来更安全，以下代码被应用于多数网站：
实例
<!DOCTYPE html><html><head><style>div {border: 3px solid #4CAF50;padding: 5px;}.img1 {float: right;}.clearfix::after {content: "";clear: both;display: table;}.img2 {float: right;}</style></head><body><p>在本例中，图像高于包含它的元素，然而它被浮动了，所以它会在容器之外溢出：</p><div><h1>Without Clearfix</h1><img class="img1" src="/images/pineapple.jpg" width="170" height="170">菠萝（学名：Ananas comosus），菠萝是凤梨的俗称，属热带水果之一。有70多个品种，岭南四大名果之一。</div><p style="clear:right">请为包含元素添加 clearfix hack，以解决此问题：</p><div class="clearfix"><h1>With Clearfix</h1><img class="img2" src="/images/pineapple.jpg" width="170" height="170">菠萝（学名：Ananas comosus），菠萝是凤梨的俗称，属热带水果之一。有70多个品种，岭南四大名果之一。</div></body></html>
您将在稍后的章节学到 ::after 伪元素。