清除浮动的解决办法总结
2016-08-11 21:49
190 查看
记录一下清除浮动的三种方法:
html结构:
css代码:
这时候出现的页面是这样的:
发现父元素并没有高度,如果子元素不浮动,父元素是可以随着子元素的高度而自动撑开的。当设置为浮动的时候,子元素已经脱离了文档流,因此父元素并没有包含子元素,在没有设置高度的情况自然就出现了如图的情况,这种时候我们就需要清除浮动:
1、添加div标签,设置clear:both
html:
css:
2、父元素设置overflow:auto或者overflow:hidden
zoom:1属性是为了兼容IE的清除浮动
3、使用after伪元素
这里的display:block改为display:table也是可以的,还有一种写法:
content里有值的时候就需要将高度设为0,同时将内容不显示,visibility:hidden改为font-size:0也是可行的
无论哪种写法都是采用了相同的原理,其本质就是使用了方法一,只不过方法一单独写了一个标签,对代码不是很友好,而after 相当于在元素内部插入了元素块,更加简洁方便。
清除浮动后的效果图:
可针对自己的代码环境选择合适的清除浮动的方法,推荐使用方法二和方法三
html结构:
<div class="main"> <div>1</div> <div>2</div> <div>3</div> </div>
css代码:
body{margin: 0;padding: 0;} .main{width:400px;border: 1px solid red;margin:50px;} .main div{width: 50px;height: 50px;float: left;border:1px solid #ccc;}
这时候出现的页面是这样的:
发现父元素并没有高度,如果子元素不浮动,父元素是可以随着子元素的高度而自动撑开的。当设置为浮动的时候,子元素已经脱离了文档流,因此父元素并没有包含子元素,在没有设置高度的情况自然就出现了如图的情况,这种时候我们就需要清除浮动:
1、添加div标签,设置clear:both
html:
<div class="main"> <div>1</div> <div>2</div> <div>3</div> <div class="clear"></div> </div>
css:
.main .clear{clear: both;height: 0;border: 0}
2、父元素设置overflow:auto或者overflow:hidden
.main{width:400px;border: 1px solid red;margin:50px;overflow: auto;zoom:1;}
zoom:1属性是为了兼容IE的清除浮动
3、使用after伪元素
.main:after{content: '';display: block;clear: both;}
这里的display:block改为display:table也是可以的,还有一种写法:
.main:after{content: '.';display: block;clear: both;height:0;visibility:hidden;}
content里有值的时候就需要将高度设为0,同时将内容不显示,visibility:hidden改为font-size:0也是可行的
无论哪种写法都是采用了相同的原理,其本质就是使用了方法一,只不过方法一单独写了一个标签,对代码不是很友好,而after 相当于在元素内部插入了元素块,更加简洁方便。
清除浮动后的效果图:
可针对自己的代码环境选择合适的清除浮动的方法,推荐使用方法二和方法三
相关文章推荐
- 如何连接oracle数据库及故障解决办法-总结 极力推荐(zT)
- “指定的Web服务器运行的不是ASP.NET1.1版”解决办法(总结)
- 清除浮动的各种方法总结
- 在IE6.0下出现浮动边距加倍解决办法
- 使用zoom、overflow解决IE6、IE7、FF下嵌套容器清除浮动问题
- 如何连接oracle数据库及故障解决办法-总结
- 总结 SQL Server 中死锁产生的原因及解决办法
- 局域网无权访问的解决办法总结
- CSS教程:总结清除浮动的方法
- 远古5.0&6.0版本404错误的实际情况总结及解决办法
- MSN登录不了解决办法总结
- PHP session常见问题集锦及解决办法总结
- PHP session常见问题集锦及解决办法总结
- 当清除中毒机器中的病毒后,本地磁盘双击变成打开方式的解决办法!
- 转载:如何连接oracle数据库及故障解决办法-总结 极力推荐
- MySQL字符集不一致的解决办法总结
- 如何连接oracle数据库及故障解决办法-总结
- 浮动图片显示在flash下面解决办法
- Ubuntu 错误提示及解决办法总结
- [总结]Server Application Error(IIS5 HTTP500)内部错误分析及解决办法