清除浮动
来源:互联网 发布:网络神剧排行榜2016 编辑:程序博客网 时间:2024/05/16 00:33
- 利用overflow:hidden,zoom:1强制外围块扩大到包含浮动元素
.clearfix{ overflow:auto;}
上述代码可以在现代浏览器上工作,但是不支持IE6
,如果需要支持IE6
,就需要加入zoom:1
.clearfix{ overflow:auto; zoom:1;}
- 若在两列或三列布局中,中间有一列的高度比较短,则后面的内容就会上移,需要在在外围div的底部添加一个清除元素,这个属性可以防止元素包围浮动元素,如下
clear:both;
- 在非浮动元素标签如div中浮动一个或多个元素时,可能会导致一个问题,如果浮动元素高于div里面的其他内容,它就会从外围元素的底部凸出来
解决办法:浮动外围元素,浮动的容器div会扩大,直到完全包含它里面的浮动元素,必须在浮动容器后的任何元素中添加一个clear属性
- 使用”简单清除法”
.clear:after{ content:""; display:block; height:0; font-size:0; clear:both; visibility:hidden;}.clear{ zoom:1 //for ie6}
注意:当空间不能够容下时,就会出现浮动下落,因此要将盒模型牢记,浏览器窗口显示的元素宽度不等于width的值,任何一个元素显示的宽度都是它的宽度,left/right border,left/right padding,以及left/right margin值得总和,若空间不足以容纳下,则会出现浮动下落
参考:
1. http://zh.learnlayout.com/clearfix.html
2. http://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use
0 0
- 清除浮动
- 清除浮动
- 清除浮动
- 清除浮动
- 清除浮动
- 清除浮动
- 清除浮动
- 清除浮动
- 清除浮动
- 清除浮动
- 清除浮动
- 清除浮动
- 清除浮动
- 清除浮动
- 清除浮动
- 清除浮动
- 清除浮动
- 清除浮动
- eclipse或者sts在注解提示是卡顿一会报错解决办法
- 登录帐号密码代码
- 108:Sort List
- memcached的安装及配置
- GC_1_学习GC之前
- 清除浮动
- 个人测试题目
- HDU3466~Proud Merchants(01背包+贪心)
- 命令操作SQL Server数据库创建数据库时参数设置
- web项目整合Jasperreports springMVC 或者Struts 整合 Jasperreports
- NS2相关学习——在ns中模拟无线场景
- 第2章-使用Express.js4创建Node.js的Web应用程序-2.2.Express.js的安装
- 股票入门知识
- The Solution to Leetcode 35 Search Insert Position