css用clearfix清除浮动

本文介绍了一种使用clearfix解决CSS浮动问题的方法,通过简单的代码实现,能够有效避免因浮动导致的容器高度塌陷问题,适用于多种浏览器环境。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本文导读:

写css 时总为浮动而烦恼,如果用了浮动,浮动的父层不会跟着浮动框的高度增加而增加,在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。这个时候我们可以用clearfix清除浮动

.clearfix:after {       
    content: ".";     /*内容为“.”就是一个英文的句号而已。也可以不写。*/
    display: block;   /*加入的这个元素转换为块级元素。*/
    clear: both;     /*清除左右两边浮动。*/
    visibility: hidden;      /*可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间,只是看不到而已;*/
    line-height: 0;    /*行高为0;*/
    height: 0;     /*高度为0;*/
    font-size:0;    /*字体大小为0;*/
}

.clearfix { *zoom:1;}   /*这是针对于IE6的,因为IE6不支持:after伪类,这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。*/

上面的代码就是.clearfix的定义和应用,简单的说下.clearfix的原理:

1、在IE6, 7下zoom: 1会触发hasLayout,从而使元素闭合内部的浮动。

2、在标准浏览器下,.clearfix:after这个伪类会在应用到.clearfix的元素后面插入一个clear: both的块级元素,从而达到清除浮动的作用。

3、在需要清除浮动的时候,只要写一个.clearfix就行了,然后在需要清浮动的元素中 添加clearfix类名就好了。

实例

<html > 
<head> 
<title> css用clearfix清除浮动实例</title> 
<meta name="generator" content="editplus" /> 
<meta name="author" content="" /> 
<meta name="keywords" content="" /> 
<meta name="description" content="" /> 
</head> 
<body> 
<style type="text/css"> 
/*所有主流浏览器都支持 :after 伪元素。*/ 
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden} 
.clearfix{*+height:1%;}/*不知道有什么用处,不加ie7也没有问题*/ 
.box{ background:#111;width:500px; position:relative;} 
.l{float:left; background:#333;width:200px; height:100px;} 
.r{float:right;background:#666;width:200px; height:200px;} 
.s{width:100px; height:100px;background:#999;position:absolute;right:-50px;;} 
</style> 
<div class="box clearfix"> 
<div class="l">left</div> 
<div class="r">right</div> 
<div class="s">absolute</div> 
</div> 
</body> 
</html> 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值