css3技术

闭合浮动元素(clearingfloat)的简单方法_div+css布局教程

字号+ 作者:H5之家 来源:H5之家 2015-09-29 08:04 我要评论( )

闭合浮动元素(clearingfloat)的简单方法,学习闭合浮动元素(clearingfloat)的简单方法,闭合浮动元素(clearingfloat)的简单方法,查看闭合浮动元素(clearing


关于闭合浮动元素(clearing float)的方法现在已经很多了,个人认为简单实用的方法就是使用:after伪类动态的嵌入一个用于清除浮动的元素,可惜代码量太大了,看上去不够简洁。

现在看到有个方法超级简单。介绍一下这个方法。原文在:

这一方面的原理是,外围元素之所以不能很好的延伸,问题出在了overflow上,因为overflow不可见(见W3C的解释)。现在只要将给外围元素添加一个“overflow:auto”,就可以解决问题,结果是除了IE,真的可以解决。下来就要解决ID的问题了,再加上“_height:1%”,这个问题就完全解决了。

下面的例子作为比较
1、没有闭合浮动元素;2、非IE下闭合浮动元素;3、完全闭合元素。相关代码如下:

XHTML代码:

div css xhtml xml Example Source Code

Example Source Code []

<div id=\"wrap\">
<div class=\"column_left\">
<h1>Float left</h1>
</div>
<div class=\"column_right\">
<h1>Float right</h1>
</div>
</div>


CSS样式:

div css xhtml xml Example Source Code

Example Source Code []

#wrap{ border:6px #ccc solid; overflow:auto; _height:1%;}
.column_left{ float:left; width:20%; padding:10px;}
.column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;}


 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评