你真的理解clear:both吗? (2010-06-14 19:11:11)转载
标签: css clear 清除浮动 it 分类: XHTML
在开发中,从美工MM给你Html代码中,肯定能经常看”<div style="clear:both;"></div>”这样的代码,但是你真的能明白它是做什么用的吗?
如:
<div style="border:2px solid red;">
<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
<div style="clear:both;"></div>
</div>
你可以将此部分代码放到一个HTML页面看看效果,然后在去掉”<div style="clear:both;"></div>”看一下效果,就知道这句话的作用了。
如图:
(1)有clear:both的:
(2)无clear:both的
这样看,应该就一目了然了:原来后边的Clear:both;其实就是利用清除浮动来把外层的div撑开,所以有时候,我们在将内部div都设置成浮动之后,就会发现,外层div的背景没有显示,原因就是外层的div没有撑开,太小,所以能看到的背景仅限于一条线。
但这种办法就是最好了的吗?
我这么说,当然答案就不是了。可以采用通过Hack实现:
<style>
.clearfix:after{
visibility: hidden;
display: block;
font-size: 0;
content: ".";
clear: both;
height: 0;
}
* html .clearfix{zoom: 1;}
*:first-child + html .clearfix{zoom: 1;}
</style>
<div class="clearfix" style="border: 2px solid red;">
<div style="float: left; width: 80px; height: 80px; border: 1px solid blue;">
TEST DIV</div>
</div>
看完解决办法,咱们来看里边的原理:
(1)、首先是利用:after这个伪类来兼容FF、Chrome等支持标准的浏览器。
:after伪类IE不支持,它用来和content属性一起使用设置在对象后的内容,例如:
a:after{content:"(link)";}
这个CSS将会让a标签内的文本后边加上link文本文字。
(2)、利用“* html”这个只有IE6认识的选择符,设置缩放属性“zoom: 1;”实现兼容IE6。
(3)、利用“*:first-child + html”这个只有IE7认识的选择符,设置缩放属性“zoom: 1;”实现兼容IE7。
分享到:
相关推荐
如: 复制代码代码如下: <div xss=removed> <div xss=removed>TEST DIV</div> <div xss=removed></div> </div> 你可以将此部分代码放到一个HTML... 如图: (1)有clear:both的 (2)无clear:both的 这样看,应该
clear:both用来清除浮动这是一直来的印象,但是自己很少会用这个,理解其实也不太正确,今天查查了资料,记录一下 float的脱离文档流 float的原始作用是为了实现文字环绕的作用,可以理解为部分脱离文档流。 CSS中说...
clear:both后margin-top不起作用而其他的左右下都起作用,这是怎么回事呢?感兴趣的朋友可以参考下
在CSS中我们会经常要用到“清除浮动”Clear,比较典型的就是clear:both;CSS手册上是这样说明的:该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。 当属性设置float(浮动...
CSS:浮动清理,不使用 clear:both标签 在进行浮动布局时,大多数人都深知,在必要的地方进行浮动清理:<div xss=removed></div>。
总结下清除浮动的一般解决方案,做网页时要注意
CSS的float属性,作用就是改变块元素对象的默认显示方式,HTML标签设置了float属性之后,它将不再独自占据一行,从而可以实现多个元素同处一行的效果,所以需要在样式定义的后面进行清除浮动
clear:both; margin-left:0px; margin-top:0px; margin-bottom:0px; display:inline-block; text-align:left; } 格式化为: .UserLogin_7{width:213px;height:45px;clear:both;margin-left:0px;margin-top:0...
今天给大家讲一下清楚浮动,在讲清除浮动前,需要了解什么是浮动,这里我就不给你大家详细介绍浮动了。 浮动也就是脱离文档流,脱离文档流了,那父级的宽高就不能被子集撑开,所以我们就需要清楚浮动,废话不多说,...
clear:both; } p{ padding:5px 0 5px 0; margin:0px; text-align:justify; line-height:19px; } p.details{ padding:5px 15px 5px 15px; font-size:11px; } p.details_cart{ clear:both; padding:25px 30px 5px 0px;...
clear:both; background:#666; text-align:center; color:#fff; } #infoot{height:54px;line-height:54px;width:960px;margin:0 auto;background:#CC9966;} #footer p{line-height:26px;} #content{background:#...
clear: both; 2、外边距自动适应(窗口大小自动适应,这个配置后看着非常舒服): 样式:margin: auto; 3、内边距,内容与边框的距离 padding: 20px; 4、给div元素添加圆角的边框、边框宽度、边框颜色、...
该清除浮动的,必定手不软的clear:both 昨天遇到img图片在ie下有有空隙 其他的浏览器都好好,就是ie中出现 老纠结的,检查的好一会 发现img中只清除border 在线效果DEMO 仅IE看哦 亲爱的朋友,你晓得如何解决吗? ...
.menu_box_style2_2{clear:both;height:50px;} .menu_box_style2_2_1{float:left;width:250px;height:50px;overflow:hidden;text-align:left} .menu_box_style2_2_2{float:right;width:720px;height:30px;margin:20...
clear:both; display:none; } #parameter div{ margin-bottom:22px; } #parameter a:link, #parameter a:visited{ color:#c2b2a2; text-decoration:none; } #parameter a:hover{ color:#FFFF00; text-...
.clear{clear:both;}/* clear float */ .pos-relative{position:relative;}/* Position Relative */ .pos-absolute{position:absolute;}/* Position Absolute */ .vertical-base{ vertical-align:baseline;}/* ...