让DIV设置Float后高度不自动增加

日期：2008年7月1日作者：查看:[大字体中字体小字体]

　　本来想把这个题目修改为“闭合浮动元素”或“清除浮动元素”，但想了一下，还是不修改为好。因为从这个题目我们可以更加容易的看出，如果您没有闭合(清除)浮动元素，它将造成的后果是-----div的高度不能自动增加。

　　言归正传

　　目前用来清除“闭合(清除)浮动”的方法，主要是一下四种：

　　1. 额外标签法

　　这种方法就是向父容器的末尾再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的（而且通常是无语义的）标签。

　　我个人不喜欢这种方法，但是它确实是W3C推荐的方法

　　＜div style="clear:both;">＜/div>

　　或者使用

　　＜br style="clear:both;" />

　　2. 使用after伪类

　　这种方法就是对父容器使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”，因为它比较小不太引人注意。然后我们再利用它来清除浮动（闭合浮动元素），并隐藏这个内容。

　　这种方法兼容性一般，但经过各种 hack 也可以应付不同浏览器了，同时又可以保证html 比较干净，所以用得还是比较多的。

　　#outer:after{

　　 content:".";

　　 height:0;

　　 visibility:hidden;

　　 display:block;

　　 clear:both;

　　}

　　3.设置overflow为hidden或者auto

　　这种做法就是将父容器的overflow设为hidden或auot就可以在标准兼容浏览器中闭合浮动元素.

　　不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的，你最好是能在多个浏览器上测试你的页面

　　4.浮动外部元素，float-in-float

　　这种做法就是让父容器也浮动，这利用到了浮动元素的一个特性——浮动元素会闭合浮动元素。这种方式在 IE/Win 和标准兼容浏览器中都有较好的效果，但缺点也很明显——父容器未必想浮动就浮动的了，毕竟浮动是一种比较特殊的行为，有时布局不允许其浮动也很正常。

　　个人不是很赞成这种做法，但是从dudo最后的总结总可以看出，他好像很赞成这种做法.
（出处：http://www.hackhome.com/）
让DIV设置Float后高度不自动增加相关文章：
·Div+CSS+JS树型菜单，可刷新
·一款DIV+CSS导航条效果
·彻底弄懂CSS盒子模式（DIV布局快速入门）
·CSS+DIV实现的滑动门菜单特效代码
·网页设计基础:Div+CSS布局入门教程
·Div+CSS基础教程(二)
·CSS+DIV自适应高度布局
·用网页标准DIV+CSS创建固定宽度的网页布局
·CSS+DIV+JS导航菜单和Flash效果差不多
·DIV+CSS三行两列经典布局
让DIV设置Float后高度不自动增加相关软件
·DiveVisions(海底世界屏幕保护) V2.2
·DivX Pro 6.8.3.18 for Windows
·DivX Codec V6.7.0.28 汉化版
·AVI DivX to DVD SVCD VCD Converter V3.2.0723 汉化版
·DivFix V1.0.7 汉化版
·AccessDiver V4.120 汉化版
·VSO ConvertXToDVD (DivxToDVD) V2.99.13.900
·Acala DivX to iPod V2.5.9
·Easy MPEG/AVI/DIVX/WMV/RM to DVD V1.8.1 汉化版
·Divx Avi Asf Wmv Wma Rm Rmvb 修复器 V3.23

上一篇:如何将Excel中方案复制到另一文件中

下一篇:微软7月起半价销售Office 2007

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

让DIV设置Float后高度不自动增加

精品推荐

热点TOP10

特别推荐