CSS浮动问题,各位大佬理解一下

  • 时间:2018-07-02 22:45 作者:杜小胖大话前端 来源:杜小胖大话前端 阅读:186
  • 扫一扫,手机访问
摘要:新项目启动了,产品拉着UI贱嗖嗖的扔给你一堆原型图,惶恐不安,汗如雨下,这TM都是些什么狗屁布局,嗯嗯,认了,其实也还算是错落有致,条理清晰。辣么,问题来了,项目布局中使用到了好多的浮动,处理方法辣么多,究竟哪一种最好呢?1.父级元素定义高度子元素浮动时,脱离了文档流,相当于父级元素中什么东西也没有

新项目启动了,产品拉着UI贱嗖嗖的扔给你一堆原型图,惶恐不安,汗如雨下,这TM都是些什么狗屁布局,嗯嗯,认了,其实也还算是错落有致,条理清晰。

辣么,问题来了,项目布局中使用到了好多的浮动,处理方法辣么多,究竟哪一种最好呢?

CSS浮动问题,各位大佬理解一下

1.父级元素定义高度

CSS浮动问题,各位大佬理解一下

子元素浮动时,脱离了文档流,相当于父级元素中什么东西也没有,自然是撑不开高度的,这个时候我们就得自己来增加一个高度了,哈哈哈,完美。

但是这样的话,父级元素的高度肯定了,子元素的高度怎样办呢,当然实现制不了了,所以不推荐用。

2.子元素最后增加div.class

CSS浮动问题,各位大佬理解一下

这是css提供的清理浮动的方法,clear:both。

但是这就带来了很多赘余的div标签,假如浮动的地方多的话,这样还是不太好的,所以不推荐用。

3.父元素一起浮动

CSS浮动问题,各位大佬理解一下

子元素浮动的时候会脱离文档流,这个时候就是考验情谊的时候了,父元素跟着一起跑了,这样就不会分开了,父元素也就自然撑开了,想想还是很美好的。

但是,鬼知道会带来什么负面的影响,所以不推荐用。

4.父级元素overflow:hidden

CSS浮动问题,各位大佬理解一下

这个第一种不同的是,假如没有用position这种强制定位的话,浏览器是能自动检查高度的,假如position的话,这有涉及到absolute,fixed脱离文档流了,所以视情况用。

5.父级元素display:table

CSS浮动问题,各位大佬理解一下

这里我就意淫大家知道table结构哈,别人好的的块级元素,你要把别人变成table,把你拉到泰国做个手术,你会好好配合吗?

当然最后谋反了,所有有不知的后果,仅理解,不推荐用。

ouch,全都不推荐,还是退出前台江湖吧……

6.来个大招,伪元素理解一下

CSS浮动问题,各位大佬理解一下

用:after增加显得块,display:block变成块级元素,height:0……具体看代码。对了,zoom是使用来适配低版本的IE浏览器的,这就是一个巨坑啊。

推荐用,推荐用,推荐用,由于大厂都在使用。无赖脸。。。

  • 全部评论(0)
最新发布的资讯信息
【网页前端|】从BAT大数据工程师那里总结的大数据学习方法(2019-05-23 11:46)
【系统环境|Linux】值得了解的十大数据发展趋势(2019-05-22 11:33)
【系统环境|软件环境】如何成为一名大数据工程师?(2019-05-20 12:11)
【系统环境|Linux】大数据四大常识,不会你敢说自己在做大数据?(2019-05-19 11:39)
【系统环境|】需要同时掌握AVA和Linux,才可以继续大数据课程的学习(2019-05-18 10:28)
【系统环境|软件环境】学习大数据,一定要了解大数据的这些用途(2019-05-16 10:49)
【系统环境|Linux】bt宝塔控制面板mysql频繁自动停止详细解决办法(2019-05-16 08:52)
【系统环境|】大数据零基础学习路线,新人记得保存收藏哦(2019-05-15 10:54)
【系统环境|】全网最全最新的大数据系统学习路径(2019-05-14 15:38)
【系统环境|Linux】毕业设计:音乐分享系统(2019-05-14 07:48)
手机二维码手机访问领取大礼包
返回顶部