CSS:闭合元素和浮动元素的差别
作者 佚名技术
来源 CSS技术
浏览
发布时间 2012-03-04
提示:本文不是教程,而是对闭合浮动元素的方法在某个特定情况下的现象的讨论,涉及float、clear、overflow、:after等知识,新手勿入。
下列代码,其显示如图1所示。
div {...}{ margin: 5px; } .wrap {...}{ width: 440px; margin: 10px; clear: both; } .div1, .div2p {...}{ float: left; width: 80px; margin: 8px; +display: inline; } XHTML: <div class="wrap"> <div class="div1">div1,浮动</div> <div class="div2"> <p class="div2p">div2内p1</p> <p class="div2p">div2内p2</p> <p class="div2p3">div2内p3,不浮动</p> </div> <div class="div3">div3,不浮动</div> </div> 提示:截图是Firefox 2.0(以下简称FF)中的效果,如无特殊声明,则表示在Windows IE7.0(以下简称IE)、Opera 9.2(以下简称Op)、Safari 3.0(以下简称Sa)中效果相同。 图1:浮动元素与子元素浮动的元素 如果对.div2p增加CSS: .div2p {...}{ ...... clear:left; } 由于“clear:left”含义为:不允许本元素左边有浮动框,而div1也是浮动元素,因此,p1和p2下移到了div1的下面,如图2所示。 图2:不浮动的元素内的浮动子元素设定&ldq |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢! |
你可能对下面的文章感兴趣
关于CSS:闭合元素和浮动元素的差别的所有评论