用clearfix:after消除(DIV块因内部浮动而高度收缩的问题)

遇到子元素浮动而引起父级元素不能完全撑开的状况;如下例

<div style="border:2px solid red;">
<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
<div style="float:left;width:80px;height:80px;border:1px solid blue;">CSSBBS</div>
<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
</div>

内部的DIV因为float:left之后,就丧失了clear:both和display:block的样式,所以外部的DIV不会被撑开。
我们想让外部容器的DIV随着内部DIV增多而增加高度,

以前的处理方法是:

1.给父级元素用overflow:hidden简单粗暴的解决,但这种方式有弊端,一是在IE6下不能完美解决,二是假如在该模块有定位的层就有定位层显示不完整的可能。

2.在父级元素里最后添加一个<div style=”clear:both”></div>来解决这个问题,但这样我们的HTML代码里就多了些冗余的代码且从语义化角度来看这也是不合理的。

而正确的解决措施是:
首先设置这样的CSS:

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

让外部的容器DIV来应用这个CSS.

这个clearfix的CSS应用了after这个伪对象,它将在利用 clearfix的元素的结尾添加content中的内容。在这里添加了一个句号".",并且把它的display设置成block;高度设为0;clear设为both;visibility设为潜藏 。这样就达到 了撑开容器的目标啦

对于ie6和ie7

* html .clearfix {

zoom:1;
}这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值