CSS：闭合元素和浮动元素的差别

作者佚名技术来源 CSS技术浏览发布时间 2012-03-04

掉margin-left的效果
/web/css/format/clearFloat/clearFloat_16.gif

图17：去掉margin-left在IE内的效果
/web/css/format/clearFloat/clearFloat_17.gif

由此可见，overflow还是有很大局限性的。
但是造成FF、Op和Sa的显示结果的原因又是什么呢？

浮动

div2浮动，浮动元素的高度会包含其内部的浮动元素。
这种方法的局限性就是，div2浮动后宽度会被压缩，因此必须给它一个宽度值，但是这样就无法自适应宽度。

.div2 {

float: left;
CSS：闭合元素和浮动元素的差别

}

.div3 {

clear: both;
CSS：闭合元素和浮动元素的差别

}
效果如图18所示。

图18：浮动div2
/web/css/format/clearFloat/clearFloat_18.gif

div2的浮动，还会造成wrap的高度问题，因此需要div3清除浮动。
由这个例子可以发现，由于div2的浮动，其内的p元素清除浮动，并没有受到div1的影响，因此，解决由于前2种方法中p1和p2下降到div1的高度之下的方法之一，可以将p1和p2外面套1个浮动的div，当然这可能影响到结构，还需要结合具体情况来决定。

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

上一页 1 2 3

分享到：更多

你可能对下面的文章感兴趣

上一篇: 雅黑字体对IE中的网页布局的影响下一篇: display:inline | block |inline-block

关于CSS：闭合元素和浮动元素的差别的所有评论

随机推荐