清除浮动的方法以及优缺点
为什么清除CSS浮动这么难?
因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及 width height 属性。
而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了。
解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问题。
我根据自己的经验总结8种清除浮动的方法(测试已通过 ie chrome firefox opera,后面三种方法只做了解就可以了):
1、父级div定义height
<style type="text/css"> .div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;}.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}</style> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2">div2</div>
- 原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题
- 优点:简单,代码少,容易掌握
- 缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题
- 建议:不推荐使用,只建议高度固定的布局时使用
- 评分:★★☆☆☆
2、结尾处加空div标签clear:both
<style type="text/css"> .div1{background:#000080;border:1px solid red}.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}/*清除浮动代码*/.clearfloat{clear:both}</style> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> <div class="clearfloat"></div> </div> <div class="div2">div2</div>
- 原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度
- 优点:简单,代码少,浏览器支持好,不容易出现怪问题
- 缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不爽
- 建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法
- 评分:★★★☆☆
3、父级div定义伪类:after和zoom
<style type="text/css"> .div1{background:#000080;border:1px solid red;}.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}/*清除浮动代码*/.clearfix:after{display:block;clear:both;content:"";visibility:hidden;height:0}.clearfix{zoom:1}</style> <div class="div1 clearfix"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2">div2</div>
- 原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题
- 优点:浏览器支持好,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
- 缺点:代码多,不少初学者不理解原理,要两句代码结合使用,才能让主流浏览器都支持
- 建议:推荐使用,建议定义公共类,以减少CSS代码
- 评分:★★★★☆
4、双伪元素清除浮动:
.clearfix:before,.clearfix:after {
content: "";
display: block;
clear:both;
}
.clearfix {
zoom: 1;
}
此方法是第3种方法的改良版虽然比较简便,但是不严谨,所以经常使用第3种方法。
5、父级div定义overflow:hidden
<style type="text/css"> .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden}.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}</style> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2">div2</div>
- 原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度
- 优点:简单,代码少,浏览器支持好
- 缺点:不能和position配合使用,因为超出的尺寸的会被隐藏
- 建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用
- 评分:★★★☆☆
6、父级div定义overflow:auto
<style type="text/css"> .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:auto}.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}</style> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2">div2</div>
- 原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度
- 优点:简单,代码少,浏览器支持好
- 缺点:内部宽高超过父级div时,会出现滚动条。
- 建议:不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。
- 评分:★★☆☆☆
7、父级div也一起浮动
<style type="text/css"> .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;margin-bottom:10px;float:left}.div2{background:#800080;border:1px solid red;height:100px;width:98%;/*解决代码*/clear:both}.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}</style> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2">div2</div>
- 原理:所有代码一起浮动,就变成了一个整体
- 优点:没有优点
- 缺点:会产生新的浮动问题。
- 建议:不推荐使用,只作了解。
- 评分:★☆☆☆☆
8、父级div定义display:table
<style type="text/css"> .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;margin-bottom:10px;}.div2{background:#800080;border:1px solid red;height:100px;width:98%;}.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}</style> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2">div2</div>
- 原理:将div属性变成表格
- 优点:没有优点
- 缺点:会产生新的未知问题
- 建议:不推荐使用,只作了解
- 评分:★☆☆☆☆
9、结尾处加br标签clear:both
<style type="text/css"> .div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1}.div2{background:#800080;border:1px solid red;height:100px}.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}.clearfloat{clear:both}</style> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> <br class="clearfloat" /> </div> <div class="div2">div2</div>
- 原理:父级div定义zoom:1来解决IE浮动问题,结尾处加br标签clear:both
- 建议:不推荐使用,只作了解
- 评分:★☆☆☆☆
转载于:https://www.cnblogs.com/zhaosijia----1234/p/8987978.html
清除浮动的方法以及优缺点相关推荐
- 触发bfc的html元素,什么是BFC? CSS 使用伪元素清除浮动的方法
BFC概念: 块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响. 我们先了解一个名词:BFC(block formatting co ...
- 清除浮动的方法总结CSS实现水平垂直居中方法总结
1.清除浮动的方法总结 当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至 ...
- 详细解读css中的浮动以及清除浮动的方法
对于前端初学者来说,css浮动部分的知识是一块比较难以理解的部分,下面我将把我学习过程中的心得分享给大家. 导读: 1.css块级元素讲解 2.css中浮动是如何产生的 3.出现浮动后,如何清除浮 ...
- “约见”面试官系列之常见面试题之第五十五篇之清除浮动的方法(建议收藏)
清除浮动的几种方法 标准流:盒子会各占整行位置.子盒子若是标准流,父盒子虽然没有高度,但是会撑开父盒子高度. 浮动:盒子浮了起来,不会占据原来的位置,若父盒子没有定义高度,则不会撑开父盒子,父盒 子高 ...
- 前端学习(310):清除浮动的方法
我们经常把高度塌陷问题也叫做常见的几种清除浮动的方法 高度塌陷问题-父元素高度自适应,子元素float后,造成父元素高度为0,就叫做高度塌陷问题 给父元素一个高度 缺点:无法高度自适应 父元素{o ...
- div为空的时候 浮动没有效果_3种CSS清除浮动的方法
点击上方 "前端技术精选" 关注,星标或者置顶 12点00分准时推送,第一时间送达 作者:html中文网 | 编辑:前端妹 来源:html.cn/web/css/19613.htm ...
- 现在比较流行的一种新的清除浮动的方法
清除浮动的方法一般有很多种,我们都是根据实际情况或者自己的习惯来清除浮动,最近发现一种比较常用的清除浮动的方法: .cf:before, .cf:after {content: " &quo ...
- css清除浮动的方法及原因
清除浮动的方法及原因 为什么要清除浮动 清除浮动的方法 方法1:为父元素设置高度 方法2:在受影响的父元素内部末尾添加块级元素-如div 方法3:伪元素清除法 方法4:给父元素设置overflow: ...
- CSS清除浮动的方法
我们先看看浮动导致什么样的效果. 正常没有浮动的案例如下: <!DOCTYPE html> <html><head><meta charset="u ...
- 常用的清除浮动的方法
清除浮动 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢 ...
最新文章
- spark重要端口号
- ValueError: Masked arrays must be 1-D
- 计算机d都学啥,信息学奥数基础知识D计算机的基本组成
- dog log 算子_DoG和LoG算子
- 启动django项目 默认启动与指定端口启动
- 4月27日—5月1日三年级课程
- java 9宫格抽奖_九宫格抽奖
- 正则表达式re库 python3
- AndroidStudio子线程更新UI的几种方式
- java ftpClient 下载文件损坏问题
- c语言课程设计文献检索,文献检索课学习心得三篇(2)
- 模式源于生活:代理模式---中介租房
- 推荐一款IDEA 快捷键 自动提示插件
- Python---项目3-破解使用crypt方法加密(已加salt参数)的登录密码
- 选择google输入法的理由
- 杭电2317题 Nasty Hacks
- 分享112个JS特效动画效果,总有一款适合您
- Sigmoid函数以及传统线性函数
- 七牛云CNAME设置,七牛云绑定域名。
- 记录 Windows 下编译一个开源 SM9 签名验签 C 程序的过程
热门文章
- 辛辛苦苦做了几天白忙活,错在哪里?
- 期待人工智能在合作时的表现
- 模板的实例化和具体化
- IP地址 网络地址 主机地址
- php 字母加1,PHP语法(1)
- 打印机怎么扫描到电脑_扫描全能王怎么把图片变成pdf_扫描全能王怎么把文件传到电脑上_问答...
- 支付宝客户端java版_支付宝对接支付-JAVA版
- android电商组件化分配,android电商组件化设计(含源码):MVP+dagger+组件化
- php和app关系,php在app开发中的应用
- 在c语言中逻辑或运算符失身额,我的Fortran基本用法小结【转载】