CSS：闭合元素和浮动元素的差别
作者 佚名技术
来源 CSS技术
浏览
发布时间 2012-03-04
uo;clear:left”后的效果 
而在IE中，整个div2都将下移到div1下，如图3所示。 图3：不浮动的元素内的浮动子元素设定“clear:left”后IE的显示 
由图3可以发现，虽然在图1中IE正确地显示了溢出的元素，但是，对于出发了layout的wrap，IE仍旧会扩展最外层的高度，以容纳浮动元素。 闭合浮动元素方法1 此时，div2的高度只包括其内未浮动元素的高度，因此使用第1种方法闭合浮动元素，为浮动元素后面的元素p3设定clear属性：   .div2p3 {...}{ clear:left; }
此时显示如图4所示，在IE中如图5所示。 图4：p3清除浮动后的效果 
图5：p3清除浮动后IE内的效果 
（啊！伟大的IE，居然多出来与div2的margin一样多的间隙。= =b） 此时如果为div2增加左边距（原设定为margin:5px）： .div2 {...}{......margin-left: 120px;}
则显示如图6所示，在IE中如图7所示。 图6：增加左边距后的效果 
图7：p增加左边距后IE内的效果 
至此的效果，是左右2栏布局常用的方法，左栏固定宽度，右栏不设定宽度以求能自适应。 闭合浮动元素方法2 尝试方法2，利用:after清除浮动： .div2:after {...}{content: "."; display: block;height: 0; clear: both; visibility: hidden;}
显示效果如图8所示。（IE不支持，不用试了。= =b） 图8：使用:after清除浮动 
可以看到div2内的p3没有清除浮动，位置仍在div2的顶端。 增加div2的左边距，显示如图9所示。 .div2 {...}{margin-left:120px;}
图9：增加div2的左边距 
由此可见使用:after清除浮动，不适合于浮动元素后面还有不浮动元素的情况。 闭合浮动元素方法3 尝试方法3，使用overflow属性： .div2 {...}{overflow:auto;  +height:100%; /**//* 针对ie6 */}
此时，最热闹的情况出现了： 图10：FF的效果 
图11：Op和Sa的效果 
图12：IE的效果（注：如果用IE 6，效果也不一样，= =|||） 
首先，div2的宽度收缩到div1的右边了，也许这正好是期望的结果？ 更热闹的在后面，增加div2的margin-left： .div2 {...}{margin-left:120px;}
图13：FF的效果 
图14：Op和Sa的效果 
图15：IE的效果（注：如果用IE 6，效果也不一样，= =|||） 
都是margin-left惹的祸，去掉margin-left： .div2 {...}{margin-left: 0;}
终于接近统一了。 图16：去 |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
你可能对下面的文章感兴趣
关于CSS：闭合元素和浮动元素的差别的所有评论
