为了解决这个问题,从网上找到这篇文章:
CSS的十八般技巧其中第十三条提到解决方案,于是看到这篇:
How To Clear Floats Without Structural Markup解决方案好象比较麻烦,如下:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
经我多次尝试,修改如下:
.clearfix {
display: block;
margin: 0px;
clear: both;
padding: 0px;
visibility: hidden;
background-color:#666666;
border:0px none #FFFFFF;
}
.clearfix:after {
height: 0px;
}
使用方法:
在所有浮动层之后加上这个层
<div class="clearfix"></div>
在IE和FireFox测试OK,我想就够了,呵呵……
分享到:
相关推荐
css中3种清除浮动方法css中3种清除浮动方法
CSS浮动属性Float详解 什么是CSS Float?
DIV+CSS布局:CSS浮动float属性详解 不解释
DIV+CSS布局:CSS浮动float属性详解[归纳].pdf
具体详细的阐述了css浮动如何解决和浮动产生的原因。
css div布局总会遇到很多浏览器兼容的问题。
使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。本文给大家带来了CSS清除浮动float的三种方法小结,感兴趣的朋友跟随脚本之家小编一起看看吧
DIVCSS布局:CSS浮动float属性详解
我对css几个主要属性的理解,inline,block,float,clear
利用div+css制作弹出层并遮罩层,主用用了两个div,一个div用于弹出框,另一个则遮罩整个页面
之后本书用两章讨论招数、过滤器、bug和bug修复,最后由Simon Collison和Cameron Moll两位杰出的CSS设计人员,将书中讨论的许多技术组合起来,给出了两个实例研究。本书还集中介绍了现实的浏览器问题,是弥补CSS知识...
解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问题。 下面总结8种清除浮动的方法(测试已通过 ie chrome firefox opera,后面三种方法只做了解就可以了): 1,父级div定义 height 复制代码...
css清除浮动大全--------共8种方法
漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div ...
精通CSS:高级Web标准解决方案.pdf
精通CSS高级Web标准解决方案 PDF
清除CSS浮动 CSS清除浮动_2种方法源代码.zip
div+css清除浮动