清除浮动

			清除浮动主要是为了解决,父元素因为子级元素浮动引起的内部高度为0的问题。

1.额外标签法(在最后一个浮动标签后,新加一个标签,给其设置clear:both;)
(方法:父元素自动检测子盒子最高的高度,然后与其同高。)
(不推荐:缺点:添加无意义标签,语义化差)
2.父级添加overflow属性(父元素添加overflow:hidden)
(方式:通过触发BFC方式,实现清除浮动 )
(不推荐:内容增多的时候容易造成不会自动换行导致内容被隐藏掉,无法显示要溢出的元素)
3.使用after伪元素清除浮动(推荐使用:符合闭合浮动思想,结构语义化正确)
.clearfix:after{/伪元素是行内元素 正常浏览器清除浮动方法/
content: “”;
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 号只有IE6-IE7执行,其他浏览器不执行/
}
(缺点:ie6-7不支持伪元素:after,使用zoom:1触发hasLayout.)
4.使用before和after双伪元素清除浮动
.clearfix:after,.clearfix:before{
content: “”;
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
优点:代码更简洁
缺点:用zoom:1触发hasLayout.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值