在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. 在虚拟机上的关于Apache(阿帕奇)(4)基于域名访问网站

    这篇随笔是基于域名访问网站,和前后两篇文章基于ip和基于端口一起练习效果更好 首先配置网卡Ip地址与hosts文件 输入命令:  vi  /etc/hosts/ (每行只能写一条,格式为IP地址+空格 ...

  2. Mybatis:配置解析

    配置解析  mybatis-config.xml(Mybatis核心配置文件)深深影响了Mybatis行为的设置和属性信息. 能配置的的内容 当然,并不是所有都是我们经常使用到的,下面选择经常使用的配 ...

  3. Pandas文本数据处理

    先初始化数据 import pandas as pd import numpy as np index = pd.Index(data=["Tom", "Bob" ...

  4. kettle6.1如何连接mongodb

    . Kettle的结构图如下: 2.介绍各个组件详细情况 表输入:通常是你的sql语句,这个会Kettle基础知识的都会不介绍了 JSON Output如下: MogoDB output如下: 下面这 ...

  5. Android 开发中是否应该使用枚举?

    本文由咕咚发布在个人博客,转载请注明出处. 本文永久地址:https://gudong.name/2019/11/04/use-enum-or-not.html 在 Android 官方文档推出性能优 ...

  6. 8.1 NOIP模拟11

    8.1 NOIP模拟 11 今天上午返校之后,颓了一会,然后下午就开始考试,中午睡着了,然后刚开始考试的时候就困的一匹,我一看T1,woc,这不是之前线段树专题的题啊,和那道题差不多,所以我..... ...

  7. linux下的压缩解压命令

    .gz解压1:gunzip FileName.gz解压2:gzip -d FileName.gz压缩:gzip FileName .tar.gz 和 .tgz解压:tar zxvf FileName. ...

  8. 开发板,pc,虚拟机三者如何互相ping通

    1 安装虚拟机时,主机和虚拟机必须是桥接网卡,保证了ip 同一:192,168,1,xx 2 打开虚拟机之前,先把pc机的无线网卡禁用掉只能使用本地连接,pc通过网线连接上网,打开虚拟机,命令行输入: ...

  9. Linux基于webRTC的二次开发(二) 实现远程桌面共享

    webRTC中的desktop_capture模块提供了捕获桌面和捕获窗口的相关功能,而实现远程桌面共享功能需要将desktop_capture捕获的画面作为peerconnection的视频源,下面 ...

  10. linux搭建简易网站

    1.检查环境 getenforce #查看seLinux运行状态 Enforcing #强行执行 setenforce #临时关闭selinux vim /etc/selinux/config #编辑 ...