网站首页 程序人生 资源汇 学建站 源码 织梦模板 特效代码 技术手册 IT头条 电商 创业 运营 站长

特色栏目 视频下载 织梦模板 教程书籍 职业生涯 正能量 美图

CSS清除浮动方法大全收藏挑错

2018-08-14 13:23 采编:程序人生 阅读 投稿赚币
CSS清除浮动方法大全
这篇文章主要介绍了CSS清除浮动方法大全(小结)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 1、父级div定义伪类:after和zoom ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
Left
Right
div2
原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题 优点:浏览器支持好,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等) 缺点:代码多,不少初学者不理解原理,要两句代码结合使用,才能让主流浏览器都支持 建议:推荐使用,建议定义公共类,以减少CSS代码 评分:★★★★☆ 2.在结尾处添加空div标签clear:both ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
Left
Right
div2
原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度 优点:简单,代码少,浏览器支持好,不容易出现怪问题 缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不爽 建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法 评分:★★★☆☆ 3.父级div定义height ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14
Left
Right
div2
原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题 优点:简单,代码少,容易掌握 缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题 建议:不推荐使用,只建议高度固定的布局时使用 评分:★★☆☆☆ 4.父级div定义overflow:hidden ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14
Left
Right
div2
原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度 优点:简单,代码少,浏览器支持好 缺点:不能和position配合使用,因为超出的尺寸的会被隐藏 建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用 评分:★★★☆☆ 5.父级div定义overflow:auto ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14
Left
Right
div2
原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度 优点:简单,代码少,浏览器支持好 缺点:内部宽高超过父级div时,会出现滚动条。 建议:不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。 评分:★★☆☆☆ 6.父级div也一起浮动 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14
Left
Right
div2
原理:所有代码一起浮动,就变成了一个整体 优点:没有优点 缺点:会产生新的浮动问题。 建议:不推荐使用,只作了解。 评分:★☆☆☆☆ 7.父级div定义display:table ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14
Left
Right
div2
原理:将div属性变成表格 优点:没有优点 缺点:会产生新的未知问题 建议:不推荐使用,只作了解 评分:★☆☆☆☆ 8、结尾处加br标签clear:both ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
Left
Right

div2
原理:父级div定义zoom:1来解决IE浮动问题,结尾处加br标签clear:both 建议:不推荐使用,只作了解 评分:★☆☆☆☆ 以上就是本文的全部内容,希望对大家的学习有所帮助。
相关标签:
程序人生if98.com,专注IT人成长、所需、职场,欢迎参与撰稿、分享资源!

扫一扫关注程序人生公众号

免责声明:本文内容由[程序人生]用户自行发布或编辑转载,本站不拥有所有权、不承担相关法律责任。 如发现有涉嫌抄袭的内容,可邮件 web@if98.com 举报,并提供证据,一经查实,本站将立刻删除涉嫌侵权内容。

发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片

站长推荐文章

阅读排行

论坛信息推荐 更多 >>

关于我们

微信公众号

扫码关注官方微信

返回顶部