少用float浮动?
在css中,float 属性定义元素在哪个方向浮动。也是我在css样式中常用到的属性,后来浏览了一些公司项目代码,发现float属性极少有人使用。随后做了一些调查和研究:
1、在ie6以下,float可能会造成兼容性问题,促使浮动方向的margin值会变成原来的两倍(margin加倍问题)。
2、使用float,可能会造成左右元素错位的问题。(在float浮动之后添加clear,clear:both;/*清除全部浮动*/clear:left;/*清除左侧浮动*/clear:right;/*清除右侧浮动*/)
3、对移动端性能优化来说,不要滥用float。float在渲染时计算量比较大。
解决方法:
使用display,position属性代替
1、根据不同需要,使用不同的css属性替代,例如:li分类排列,可以使用display:inline 等等
2、position 属性规定元素的定位类型。通过定位,来实现你需要的布局。
以上纯属个人见解,如有不同见解,欢迎提取意见!
少用float浮动?的更多相关文章
- 【转】CSS清除浮动_清除float浮动
CSS清除浮动方法集合 一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 浮动产生样式效果截图 ...
- 对css float 浮动的学习心得
css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...
- CSS清除浮动_清除float浮动
2.clear:both清除浮动为了统一样式,我们新建一个样式选择器CSS命名为“.clear”,并且对应选择器样式为“clear:both”,然后我们在父级“</div>”结束前加此di ...
- CSS清除float浮动
一.浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在 ...
- 第九篇 float浮动
float浮动 首先老师要声明,浮动这一块,和边距.定位相比,它是比较难的,但是用它,页面排版会更好. 这节课就直接上代码,看着代码去学浮动. 我们先弄一个div,给它一个背景颜色: HTML ...
- float浮动导致父元素高度坍塌的原因及清除浮动方法
一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内, ...
- css之float(浮动)的特性
详解CSS float属性 float本身不脱离文档流,但是和 position:absolute;搭配使用会脱离文档流 阅读目录 基础知识 float的详细细节 float特殊情况 clear属性 ...
- 给li设置float浮动属性之后,无法撑开外层ul的问题。
最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...
- 给li设置float浮动属性之后,无法撑开外层ul的问题。(原址:http://www.cnblogs.com/cielzhao/p/5781462.html)
最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...
随机推荐
- MySQL查询-分组取组中某字段最大(小)值所有记录
最近做东西的时候,用到一个数据库的查询.将记录按某个字段分组,取每个分组中某个字段的最大值的所有记录.举栗子来说. 已知分数表“score”,包含字段“id", "name&quo ...
- [考试反思]1107csp-s模拟测试104: 速度
20分钟能做什么? 不粘排行榜,没意义,第一机房集体重启,我侥幸找回了两个文件才有分. 实际得分应该是70+100+60,第二机房rank1...放在第一机房就不知道了 T1:中间值 比较喜欢题解的第 ...
- CSPS模拟 90
- Handler dispatch failed; nested exception is java.lang.NoClassDefFoundError: org/springframework/util/PatternMatchUtils
{ "message": "Handler dispatch failed; nested exception is java.lang.NoClassDefFoundE ...
- 在linux用ueditor遇到的问题
在使用ueditor时,遇到很多问题.最大问题是就是服务器返回出错 最让人头疼的是preview没有任何信息.之前也找过很多的资料,很多资料都没有提到修改controller.php文件中error_ ...
- IDEA Debug 无法进入断点的解决方法
文章来源: https://studyidea.cn/idea_breakpoint_not_use 前言 某个多模块项目中使用多个版本的 Spring,如 Spring 4,Spring 5,在使用 ...
- Netty学习篇⑤--编、解码
前言 学习Netty也有一段时间了,Netty作为一个高性能的异步框架,很多RPC框架也运用到了Netty中的知识,在rpc框架中丰富的数据协议及编解码可以让使用者更加青睐: Netty支持丰富的编解 ...
- hdu 1880 魔咒词典(双hash)
魔咒词典Time Limit: 8000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- setState何时同步,何时异步,为什么?
setState何时同步,何时异步,为什么 答案:在React库控制时,异步:否则同步. 示例代码如下: constructor(props){ super(porps); this.state = ...
- 用java实现“钉钉微应用,免登进入某H5系统首页“功能”
一.前言 哈哈,这是我的第一篇博客. 先说一下这个小功能的具体场景: 用户登录钉钉app,点击微应用,获取当前用户的信息,与H5系统的数据库的用户信息对比,如果存在该用户,则点击后直接进入H5系统的首 ...