【CSS】清除浮动 ④ ( 清除浮动 - 使用双伪元素清除浮动 | 代码示例 )
/* 使用伪元素清除浮动 */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* 使用zoom属性兼容老版本的IE浏览器 */
.clearfix {
*zoom: 1;
}
/* 示例用法 */
<div class="clearfix">
<div style="float: left;">浮动内容</div>
</div>
这段代码定义了一个clearfix类,它使用:before和:after伪元素来创建一个看不见的块级框,从而包含浮动元素,并清除内部元素的浮动。zoom属性是一个IEhack,用于在老版本的IE浏览器中触发hasLayout,从而使浮动生效。这是一种常见的清除浮动方法,兼容性良好。
评论已关闭