.clearFloat:after {
visibility: hidden
clear: both
display: block
height: 0px
content: "."
}
.clearFloat {
zoom: 1
}
使用方式为<div class="clearFloat"><div style="float:left"></div></div>
之所以好的原因就是它不用额外的声明一个专门拿来清除浮动的元素，同时可以闭合浮动。
对于楼主的问题，解释是这样的。
当一个元素浮动时，其后的元素会受到浮动的影响，如果你想消除这个影响就要清除浮动。
闭合浮动是指当浮动元素被正确的包裹在其父元素内。例如
<div style="background-color:#000">
<div style="float:leftheight:80pxwidth:50%background-color:#f00></div>
</div>
你会发现红色块覆盖在黑色块之上（对于firefox等应该根本看不到黑色块），这就是因为没有闭合，父元素无法包裹住浮动块。如果闭合的话黑色块的面积应该是大于红色块的。
br 不是内联标签，也不是块，他只是属于HTML中的一个特殊语法。或者换句话来说。br就是一个换行的标记，出了换行你能看到效果以外，其他的什么都看不到。当然，如果他有一部分是满足内联元素的特性的 ，但不能完全说他是内联，因为他啊无法添加display属性，而内联标签可以添加任何属性。1，<br>可插入一个简单的换行符。
<br>标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。在 XHTML 中，把结束标签放在开始标签中，也就是 <br />。
请注意，<br>标签只是简单地开始新的一行，而当浏览器遇到 <p>标签时，通常会在相邻的段落之间插入一些垂直的间距。
如下这个示例：
<html><body>
<p>
测试<br />测试文字<br />这是第三行了
</p>
</body>
</html>
2，<hr>标签在 HTML 页面中创建一条水平线。
水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。
如下这个示例：
<html><body>
<p>hr 标签定义水平线：</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
</body>
</html>
