在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浮动?的更多相关文章

  1. 【转】CSS清除浮动_清除float浮动

    CSS清除浮动方法集合 一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 浮动产生样式效果截图 ...

  2. 对css float 浮动的学习心得

    css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...

  3. CSS清除浮动_清除float浮动

    2.clear:both清除浮动为了统一样式,我们新建一个样式选择器CSS命名为“.clear”,并且对应选择器样式为“clear:both”,然后我们在父级“</div>”结束前加此di ...

  4. CSS清除float浮动

    一.浮动产生原因   -   TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在 ...

  5. 第九篇 float浮动

    float浮动   首先老师要声明,浮动这一块,和边距.定位相比,它是比较难的,但是用它,页面排版会更好.   这节课就直接上代码,看着代码去学浮动. 我们先弄一个div,给它一个背景颜色: HTML ...

  6. float浮动导致父元素高度坍塌的原因及清除浮动方法

        一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内, ...

  7. css之float(浮动)的特性

    详解CSS float属性  float本身不脱离文档流,但是和 position:absolute;搭配使用会脱离文档流 阅读目录 基础知识 float的详细细节 float特殊情况 clear属性 ...

  8. 给li设置float浮动属性之后,无法撑开外层ul的问题。

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...

  9. 给li设置float浮动属性之后,无法撑开外层ul的问题。(原址:http://www.cnblogs.com/cielzhao/p/5781462.html)

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...

随机推荐

  1. Vue学习笔记(五)——配置开发环境及初建项目

    前言 在上一篇中,我们通过初步的认识,简单了解 Vue 生命周期的八个阶段,以及可以应用在之后的开发中,针对不同的阶段的钩子采取不同的操作,更好的实现我们的业务代码,处理更加复杂的业务逻辑. 而在这一 ...

  2. 和manacher有关的乱写

    当初学kmp hash的时候被教导manacher非常的鸡肋 今天因为一篇神奇的题解我忍不住颓废了两节课把它学了 思路,代码都比较好懂 虽然它不如各种自动机霸气,唯一的功能貌似就是$O(n)$求出所有 ...

  3. 如何利用缓存机制实现JAVA类反射性能提升30倍

    一次性能提高30倍的JAVA类反射性能优化实践 文章来源:宜信技术学院 & 宜信支付结算团队技术分享第4期-支付结算部支付研发团队高级工程师陶红<JAVA类反射技术&优化> ...

  4. 第5天,python之路

    已经过了两三天了,东西一点没来写,今天慢慢的写吧. 还是会按Alex Li的流程来学习,编写     写出自己的东西 常用的数据类型 简单的有,str ,int , 常用的:  列表list[], 字 ...

  5. python语言线程标准库threading.local源码解读

    本段源码可以学习的地方: 1. 考虑到效率问题,可以通过上下文的机制,在属性被访问的时候临时构建: 2. 可以重写一些魔术方法,比如 __new__ 方法,在调用 object.__new__(cls ...

  6. MySQL系列:MySQL的基本使用

    数据库的基本操作 在MySQL数据库中,对于一个MySQL示例,是可以包含多个数据库的. 在连接MySQL后,我们可以通过 show databases; 来进行查看有那么数据库.这里已经存在一些库了 ...

  7. 数据分析之路 第一篇 numpy

    第一篇 numpy 1.N维数组对象 :ndarray在Python中既然有了列表类型,为啥还要整个数组对象(类型)?那是因为:1.数组对象可以除去元素间运算所需要的循环,使得一维向量更像单个数据2. ...

  8. Apache Spark 3.0 预览版正式发布,多项重大功能发布

    2019年11月08日 数砖的 Xingbo Jiang 大佬给社区发了一封邮件,宣布 Apache Spark 3.0 预览版正式发布,这个版本主要是为了对即将发布的 Apache Spark 3. ...

  9. Electron 菜单切换主题与css替换 ts编写

    ////目标css<link rel="stylesheet" id="theme_css" href="路径"> ////ts ...

  10. [TCP/IP] 学习TCP/IP协议的笔记

    1.我看的视频是https://www.bilibili.com/video/av10610680?from=search&seid=1733008388243131444这位大大的视频讲解. ...