两种情况
清除浮动包括清除子元素的浮动和清除上级元素的浮动,其中清除上级元素的浮动,只需设置clear为both就可以了,而清除子元素的浮动则可以用空标签法、clearfix方法或overflow方法。因清除上级元素的浮动比较简单,而空标签法清除子元素浮动会增加额外标签,所以在这里主要说clearfix方法、overflow方法及偶然发现的inline-block方法。
为什么要清除浮动
一个块级元素的高度如果没有设置height,那么其高度就是由里面的子元素来撑开的,如果子元素使用浮动,脱离了标准的文档流,那么父元素的高度会将其忽略,你可以使用firebug查看下如果不清除浮动,父元素会出现高度不够,那样如果设置border或者background都得不到正确的解析
清除子元素浮动clearfix方法
demo 1 clearfix方法
Html Code
<ul id="demo1" class="nostyle demo clearfix"> <li><img alt="img1" src="http://placehold.it/150/ffffff/00c5e3&text=demo"></li> <li><img alt="img2" src="http://placehold.it/150/ffffff/00c5e3&text=demo"></li> <li><img alt="img3" src="http://placehold.it/150/ffffff/00c5e3&text=demo"></li> </ul>
Css Code
/*简洁版*/ .clearfix:before, .clearfix:after { content:""; display:table; } .clearfix:after{ clear:both; overflow:hidden; } .clearfix{ zoom:1; } /* 经典版 */ .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */
注:clearfix的方法主要就是在浮动元素的父元素上加上一个clearfix class,然后这个父元素的框就会包括所有的浮动子元素。
清除子元素浮动overflow方法
demo 2 overflow方法
Css Code
/* overflow:auto */ #demo2{ overflow:auto;*zoom:1; } /*或 overflow:hidden */ #demo2{ overflow:hidden;*zoom:1; }
注:这种方法主要是对父元素设置css,所以不需要加个class,下面的inline-block方法相同,只需设置父元素的css即可
清除子元素浮动inline-block方法
注:这个方法是我在写本文的时候发现的,完美兼容浏览器,因为是偶然发现的,还没有大量运用,所以暂作推荐,有兴趣的可以私下测试,当然它清除的子元素浮动和前面两种还是有点差别的,细心的你早就发现了,前面两个demo比下面的这个demo宽度要大啊呵呵,inline-block正常表现
demo 3 inline-block方法
Css Code
#demo3{ display:inline-block;*display:inline;*zoom:1; }
相关推荐
浮动一直是我们编写网页最常用的方法,但是也是最不听话的,一不小心会乱跑,虽然有万能的float闭合div多写一个可以解决掉,但是为了清除浮动而多出来一个空的div实在看着不爽,这里我在网上找到了两种解决的办法,...
总结下清除浮动的一般解决方案,做网页时要注意
主要介绍了CSS清除浮动的方法详解,值得注意的是并不是每次单纯把浮动清除掉就可以解决相关问题,文中最后谈到的闭合浮动的方案也非常值得一试,需要的朋友可以参考下
css多浏览器兼容方案和准则 清除浮动 还有解决兼容问题的一系列方法
- 自动计算清除浮动的位置 ####设置 < script src =" js/epicGrid.min.js " > </ script > </ body > 或包含在<head>并在结束</body>之前调用 < script src =" js/...
- 缺点 :浮动是脱离文档流的,有些时候需要清除浮动,需要很好的处理浮动周边元素的关系 - 优点 :兼容性比较好 (2)绝对定位 : - 缺点 :该布局脱离文档流,所以子元素也必须脱离文档流,因此可使用性比较差 - ...
实现水平居中布局的方案实现垂直居中布局的方案实现水平垂直居中布局的方案两列/三列/多列布局实现的方案BFC及其应用清除浮动的方法常见的兼容性问题CSS绘制三角形、圆形、扇形、菱形CSS3动画简述Rem及其转换原理...
从页面开始布局设计初就考虑到各个浏览器的问题,留出充足的余量和给... 问题分析:B层使用了float,位置浮起,A层边框不能显示 解决方案:对A开始使用一个浮动清除<div xss=removed></div> 2、cms ie6的内容页面
公认的解决方案必须是响应友好的。 负保证金 -没有React 绝对位置 -没有兄弟姐妹的概念 固定位置 - 没有兄弟姐妹的概念 表 - 没有React - 绝对定位儿童的问题 -小区间间距的问题 - 单元格溢出问题 浮动 - 仅水平 - ...
运行高效的运行性能以及良好的可维护性,在近几年来吸引了众多国内机关单位的使用与推动:由于有众多支持者的推动和支持,其安全与稳定性较之其他平台更强,也更能迅速的从中找到有效的业务解决方案。NZCMS正是基于...
2.6.1 使用“解决方案资源管理器”管理项目文件 47 2.6.2 使用解决方案 48 2.6.3 理解项目组件 49 2.6.4 设置项目属性 50 2.6.5 添加和删除项目文件 50 2.7 快速而简单的编程入门指南 51 2.7.1 用变量存储值 ...
2.6.1 使用“解决方案资源管理器”管理项目文件 47 2.6.2 使用解决方案 48 2.6.3 理解项目组件 49 2.6.4 设置项目属性 50 2.6.5 添加和删除项目文件 50 2.7 快速而简单的编程入门指南 51 2.7.1 用变量存储值 ...
高级(ad-hoc)查询,即时数据分析,计算字段,前10评级,根据季度将数据分组,设置解决方案的格式,常见的故障排除方法,外部和OLAP数据,数据透视图,利用VBA实现自动化,Excel服务器,熟悉功能区。 “使用没有...
高级(ad-hoc)查询,即时数据分析,计算字段,前10评级,根据季度将数据分组,设置解决方案的格式,常见的故障排除方法,外部和OLAP数据,数据透视图,利用VBA实现自动化,Excel服务器,熟悉功能区。 “使用没有...
高级(ad-hoc)查询,即时数据分析,计算字段,前10评级,根据季度将数据分组,设置解决方案的格式,常见的故障排除方法,外部和OLAP数据,数据透视图,利用VBA实现自动化,Excel服务器,熟悉功能区。 “使用没有...