石排镇CSS如何实现使浮动元素的父元素自动扩展

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

我们都知道，如果一个父元素内部含有的几个子元素如果浮动的话，而在浮动后其父元素会收缩，如果父元素内除了浮动元素外没有其他元素的话，父元素的高度甚至会收缩到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中插入没有语义的容器，未免有些突兀。