在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. yii2中commands的简单应用

    class HelloController extends Controller { /** * This command echoes what you have entered as the me ...

  2. Java编程思想——第17章 容器深入研究(two)

    六.队列 排队,先进先出.除并发应用外Queue只有两个实现:LinkedList,PriorityQueue.他们的差异在于排序而非性能. 一些常用方法: 继承自Collection的方法: add ...

  3. Java IO编程——文件拷贝

    在操作系统里面有一个copy命令,这个命令的主要功能是可以实现文件的拷贝处理,现在要求模拟这个命令,通过初始化参数输入拷贝的源文件路径与拷贝的目标路径实现文件的拷贝处理. 需求分析: ·需要实现文件的 ...

  4. SP5150 JMFILTER - Junk-Mail Filte(并查集)

    直秒并查集.这题的难点就在于怎么删点.如果要删的是叶节点,那还好,直接刨掉即可 如果是中间节点甚至是根节点,那就不好办了..... solution: 对于独立一个点,我可以用邻接表模拟,然后用并查集 ...

  5. 表格可拖拉列改变列大小(使用的时候将youElement全部替换称你要添加这个效果的元素,需是jqery的选择器格式,如:$("table th/td"))

    $(function () { var isMouseDown = false; var currentTh = null; youElement.bind({ mousedown: function ...

  6. linux内核崩溃之kdump机制

    kdump相关概念 standard(production) kernel   生产内核    ,是指我们正在使用的kernel. Crash(capture)kernel             捕 ...

  7. SpringBoot 整合jdbc和mybatis

    摘要 该文章主要为记录如何在SpringBoot项目中整合JDBC和MyBatis,在整合中我会使用简单的用法和测试用例,毕竟该文章目的是为了整合,而不是教大家如何去使用.希望大家多多包涵. 通用配置 ...

  8. CMDB连接方式

    1.agent agent (放在每台客户端服务器上,定时任务) 脚本演示 # 采集本机的信息 执行命令 import subprocess v1 = subprocess.getoutput('ip ...

  9. java编程思想第四版第九章习题

    第三题 package net.mindview.interfaces; abstract class Base{ public Base(){ print(); } abstract void pr ...

  10. 领扣(LeetCode)字符串相加 个人题解

    给定两个字符串形式的非负整数 num1 和num2 ,计算它们的和. 注意: num1 和num2 的长度都小于 5100. num1 和num2 都只包含数字 0-9. num1 和num2 都不包 ...