[web标准网页设计与php]web标准化:闭合浮动元素超级简单的方法

更新时间:2014-09-20    来源:设计基础    手机版     字体:

【www.bbyears.com--设计基础】

外围元素之所以不能很好的延伸,问题出在了overflow上,因为overflow不可见,见W3C的解释。现在只要将给外围元素添加一个overflow:auto;就可以解决问题,结果是除了IE,真的可以解决。下来就要解决ie的问题了,再加上_height:1%; ,这个问题就完全解决了。
下面是我做的三个例子作为比较
1.没有闭合浮动元素
2.非IE下闭合浮动元素
3.完全闭合元素
代码如下:

 代码如下 XHTML

Float left




Float right




CSS样式:

 代码如下 #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;}

本文来源:http://www.bbyears.com/wangyezhizuo/9414.html

热门标签

更多>>

本类排行