[分享]css中clearfix清除浮动的用法

CSS中clearfix是一种清除浮动的技术，它可以解决由于浮动元素导致的父元素高度崩溃的问题。在浮动元素不设置高度的情况下，父元素的高度将会被子元素撑开，导致父元素高度不准确。而clearfix技术...

CSS中clearfix是一种清除浮动的技术，它可以解决由于浮动元素导致的父元素高度崩溃的问题。

在浮动元素不设置高度的情况下，父元素的高度将会被子元素撑开，导致父元素高度不准确。而clearfix技术的使用就可以解决这个问题。

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
}
.clearfix {
    zoom: 1;
} 

上述代码是使用clearfix技术的标准写法。在父元素中添加clearfix类，在CSS样式中定义clearfix:after伪元素。在这个伪元素中使用clear:both将浮动元素清除，从而解决了父元素高度不准确的问题。

需要注意的是，在使用clearfix技术时，还需要设置zoom:1以让IE6和7浏览器能够正确地显示clearfix的效果。而zoom:1的作用是触发ie的haslayout属性，以让浏览器正确呈现样式效果。

在实际开发中，clearfix技术是一个非常常用的技术。它可以很好地解决由于浮动元素导致的父元素高度不准确的问题，从而让页面呈现更加美观且正确的效果。