在网站的前端工作中，经常会遇到使用浮动布局的情况。

咋们都知道，假如一个父元素内部含有的几个子元素假如浮动的话，而在浮动后其父元素会收缩，假如父元素内除了浮动元素外没有其他元素的话，父元素的高度乃至会收缩到0，从而使得页面底部的元素上移，较终破坏了页面的布局。

相对这种情况，有一些人可能选择在浮动元素的底部加一个<br/>标签，并对这样的<br/>定义clear:both;的样式定义，从而清除浮动，使浮动元素的父元素自动扩展。但这样子做，又使得无效标签的使用。现在，业界较优的解决方案是使用:after伪类来实现清除浮动，从而可以使用.clear:after{content:"."; height:0; display:block; clear:both; visibility:hidden;} .clear{zoom:1;}来实现。

当然，这在通过CSS在元素之后追加"."并不用要，由于还必须要visibility来隐藏掉它。通过优化，代码如下：
.clear:after{content:"020";display:block;height:0;clear:both;} .clear{zoom:1;}
其中，020指在容器后增加空格，这样子就防止使用visibility隐藏可视性了。
另外，不推荐使用空div的方法。单单为了清除浮动而在结构良好的HTML中插入没有语义的容器，未免有一些突兀。