清除浮动塌陷的4种经典套路
【自古深情留不住,总是套路得人心。】
这些日子,各个朋友圈随时可以见到这句话的身影。的确人们常说:“多一点真诚,少一点套路。”,但是最终现象写实也是那么残酷和无奈。
同样在前端攻城狮的道路,我们都是真诚尽心尽力的去学习进取。奈何先是各大浏览器厂商的大战不断,导致我们这群学习的人苦不堪言,一片水生火热呀。不得不想进各种hack方法解决。(没错,这里就是吐槽的IE6!)
图片来自与网络
其次文档标准流,在浮动之后也会挖下塌陷的大坑。初学者稍有不慎,塌陷的失控的子元素到处乱窜,弄的你鸡飞狗跳苦不堪言。那么为了后面前端大道越行越远,下面就跟大家讲解一下清除浮动的套路演变。
不过在讲套路得时候,咱们顺带的也把浮动之后塌陷大坑给顺便重现一样。
浮动塌陷大坑:
先来看一个小小的demo:现在有两个div,div身上没有任何属性。每个div中都有li,这些li都是浮动的先是html骨架部分
css样式:
看到这里,如果说没有吃过浮动塌陷大亏的同学,肯定会以为这个网页中效果是这个样子
就是这么自信
但是实际上浏览器最终的渲染的样子:
残酷的事实
结果:第二个div中的li,去贴第一个div中最后一个li的边了。
原因:div没有高度,不能给自己浮动的孩子们,一个容器。所以第二个div中的li,去贴第一个div中最后一个li的边了!
这种现象又称作为浮动塌陷现象!
讲完浮动塌陷之后,让我开始回归今天的正题。清除浮动塌陷的4种套路方法
套路1:给浮动的元素的上级添加高度
如果一个元素要浮动,那么它的祖先元素一定要有高度。高度的盒子,才能关住浮动。
只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。
所以只需要给li的上级ul或者div设置一个height:40px;(只要是浮动元素的上级元素就可以。),那么第二个div就好挤下来,在第一个盒子下面显示出来。
套路2:clear:both;
但是在实际开发过程当中中,高度height很少出现。为什么?因为能被内容撑高!那也就是说,刚才我们讲解的方法1,工作中用的很少。
那么这里有人可会脑洞大开:能不能不写height,也把浮动清除了呢?也让浮动之间,互不影响呢?
事实上的确有这样的解决方法,是给他的上级添加一个clear:both;首先Clear就是清除的意思,both,代表左浮动和右浮动都清除掉。通俗一点来讲,就是说清除别人对我的影响。
虽然说这样可以清除浮动塌陷现象,但是同样也会有一个致命的问题。那就是两个div之间,margin值失效了,无法设置。再重申一下,是指两个div之间。
套路3:隔墙法
既然用clear:both会导致两个div之间margin失效,那么到后面有人又开始脑洞大开了。在中间一个空盒子,然后给那个空盒子clear:both;(为了方便大家看效果,这里并没有放的是空盒子,而是放的有一个有高度、有颜色的盒子。)
这样加了一堵墙之后,第二个div就能掉下来并且不干扰了上面的元素。而且第二个div还是能通过magin-top调节两个div(“墙体”div不要算进去)之间的间距,所以隔墙法作为一个新的套路沿传开来。
套路3.1:隔墙法进化版—内墙法
在这个世界上面存在一种人--完美主义者,在他们的世界观里面瑕疵是坚决不允许的。然后在前端行业中,也有一批追求完美主义前端攻城狮。他们对于隔墙法的小瑕疵表示完全不能接受,所以这一群完美主义的前端攻城狮开始对他的隔墙法的完美的改造进化去了。
于是“内墙法”横空诞生,先来看一下代码结构:
只是将墙体的位置改变了,就完美的解决第一个div不能通过margin-bottm来调节与下面div之间的间距。
所以后面很长一段时间,“内墙法”成为各大公司清除浮动主流写法。
套路4:overflow:hidden;
overflow就是“溢出”的意思,hidden就是“隐藏”的意思。
通过截图可以看出内容太多,溢出了盒子。这个时候添加一行代码overflow:hidden;发现溢出盒子边框的内容,被隐藏看不到了。
这个样式本意就是清除溢出到盒子外面的文字。但是,被某些前端攻城狮工程师发现它能做偏方。写法简单粗暴,好理解。属于在W3C文档额外扩展,就好比当初发明摩托车的人绝对不会想到,摩托车还能开这么开。
所以这个overflow:hidden;也算是一个“祖传老偏方”,能治浮动塌陷老毛病。当然既然是“偏方”,肯定就有因为有些特殊情况下不能解决。导致只是沦为“偏方”而排不上正统。
偏方的失效情况:
就是当其中涉及到position定位的时候,若定位的区域超出那个盒子,overflow:hidden;就会把多的部分裁切掉。
来自iTunes和天猫截图合成
各位试想一下,假设这个蓝色方框代表DIV盒子,如果给这个DIV盒子添加一个overflow:hidden;属性后果会咋样,估计产品当天就提刀来见。
所以除了这个老毛病,overflow:hidden;其简单粗暴的写法,还是有与“内墙法”一争正室能力。
小结:
其实还有很多套路能够清除浮动,比如给浮动塌陷的元素再添加一个浮动,添加一个绝对定位……等一些方法。太多方法奇招怪招了,有兴趣的小伙伴再另行研究。
目前只讲这4种前端开发过程主流清除浮动塌陷的套路,听完这四种套路之后,以后各位小伙伴将采用哪一种方式清除浮动呢!估计很多小伙伴会使用“内墙法”来清除浮动的,的确内墙法以前是很流行。但是随着时代是不断进步的,很多企业在实际开发过程当中不再单纯的使用了“内墙法”
这里估计有人就会吐槽了,不是说好了主流清除浮动就4种套路吗?这4种套路就目前就“内墙法”没有暴露问题,难不成用冷门的?
别着急,现在企业里面采用的清除浮动方法综合法,又名内墙法2.0
给浮动塌陷的盒子添加一个:after伪类
这种方法在各个大型项目上都有出现过,可谓清除浮动的万金油呀!本来说好的四种套路,现在除了那四种套路之外却一下子延伸出好几种清除浮动的套路,估计有些小伙伴要晕了吧。
下面让我们通过思维导图来帮助,晕头的小伙们整理思路吧!
之所以给各位小伙伴绕了这么大一个圈子,就是怕直接就把这种方法拿出来告诉大家。肯定会有小伙伴疑惑为什么要这么写,而此时看到相信各位看完本文的套路介绍之后,对清除的浮动的方法有了更深刻的了解了吧。
原创文章,文笔有限,才疏学浅,文中若有不正之处,再次再次再次欢迎各位啪啪的打脸赐教。(有句话说的好,重要的词得说三遍。)
我是车大棒,我的目标是星辰与大海。
转载于:https://www.cnblogs.com/chedabang/p/5973601.html
清除浮动塌陷的4种经典套路相关推荐
- CSS清除浮动大全共8种方法
清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的 ...
- css清除浮动float的三种方法总结
一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer"><div class="div ...
- HTML如何消除别的块的影响,CSS清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?...
一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: 1 2 3 分析CSS代码样式: .outer{border: 1px solid #ccc;background: ...
- 清除浮动影响的几种方法
今天分享的是清除浮动的几种方法,当我们在布局的时候,图如下: 而我们想实现的是(1)里头的元素还在框里但是保持一行,(2)框的高度跟随里头最高的元素. 我知道有很多方式可以做,但今天我们要讲的是和浮动 ...
- 亲爱的老狼-清除浮动float的5种方法
1>清除子级元素的浮动时,使用clear:left.right.both clear:both写成空盒子.放在css内末尾 2>清除父级元素的浮动时,使用overflow:hidden.a ...
- 清除浮动的常用几种方式
(1)给父级元素单独定义高度(height) 原理:如果父级元素没有定义高度,父元素的高度完全由子元素撑开时,父级div手动定义height,就解决了父级div无法自动获取到高度的问题. 优点:简单. ...
- (08)2020-12-10(清除浮动/解决父类塌陷问题、定位问题、ifont图标)
清除浮动/解决父类塌陷问题.ifont图标 一.清除浮动 1,父类塌陷产生原因 2,解决方法(不推荐,只做了解) 3,解决方法 1, css的伪元素,是指他们不是真正的页面元素.html中并没有对应的 ...
- 清除浮动的四种方式及其原理
前言: 什么是浮动,浮动给我们造成了什么困扰,我们该使用什么方式来解决它.下面会介绍到为什么要清除浮动以及清除浮动的四种方式. 目录: 前言: 一.为什么要清除浮动 二.清除浮动的第一种方式---给父 ...
- 如何清除浮动(float)所带来的影响
清除浮动(float) 1.定义和用法 在w3c中给了浮动这样的定义. "float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素 ...
最新文章
- 使用Python,OpenCV和Haar级联进行人脸检测——轻量级的人脸检测器
- 写扩展性好的代码:函数
- python函数都有啥_什么是python函数
- 用delphi创建服务程式
- Dcoker(系列) docker-redis警告处理
- 3.10 直观理解反向传播-深度学习-Stanford吴恩达教授
- mysql ——MHA
- 农区养羊如何配套种草
- jmeter 取json值_Jmeter入门13 后置处理器JSON Extractor提取json的多个值
- Android开发技术周报 Issue#72
- nginx ssl 双向认证
- centos7.6查看什么进程跑的流量_Spark的提交方式有哪些?有什么区别?
- Linux下自动化监控内存、存储空间!
- LAMP组合之服务分离部署
- random.uniform()用法
- 数据挖掘概念与技术(原书第三版)范明 孟小峰译-----第三章课后习题答案
- as400 c语言程序,AS400上的C編程
- 耳目一新的汇小贷P2P网贷加盟连锁优势
- 回顾百度企业竞争情报系统
- Photographic Tone Reproduction for Digital Images
热门文章
- Java面试日常总结大杂烩
- html加动画不改变高度,怎么为不定高度(height:auto)的元素添加CSS3 transition-property:height 动画...
- linux从别的主机下载,从局域网内的其他Linux主机下载文件
- oracle数据库连接满了,ORACLE数据库连接数满的分析及优化
- ‘cnpm‘ 不是内部或外部命令,也不是可运行的程序
- android 页面整体滑动,ScrollView 实现页面整体滑动
- java实现鸭子类型,Golang的interface及duck typing鸭子类型
- java android上传文件_Java-Android-如何将txt文件上传到网站?
- C++ 流类和流对象
- Jsoup设置属性值