在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. <script>属性async和defer的区别

    async:可选.表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或 等待加载其他脚本.只对外部脚本文件有效. defer:可选.表示脚本可以延迟到文档完全被解析和显示之后再执行.只 ...

  2. MIT线性代数:15.子空间的投影

  3. DOS打印目录树到文件

    tree /f >>tree.txt 卷 数据 的文件夹 PATH 列表 卷序列号为 -FBAE E:. └─mysite │ manage.py │ └─mysite settings. ...

  4. C函数库ctype.h概况

    1 字符测试函数 1> 函数原型均为int isxxxx(int) 2> 参数为int, 任何实参均被提升成整型 3> 只能正确处理处于[0, 127]之间的值 2 字符映射函数 1 ...

  5. docker已运行容器添加或修改端口映射

    # 不推荐方法:将原来的容器提交成镜像,然后利用新的建立的镜像重新建立一个带有端口映射的容器# 推荐方法:## 查看id 就是 容器的 hash_of_the_container 数值 docker ...

  6. day 2 下午 骑士 基环树+树形DP

    #include<iostream> #include<cstdio> #include<cstring> #include<cstdlib> #inc ...

  7. 【WPF on .NET Core 3.0】 Stylet演示项目 - 简易图书管理系统(3) - 使用Conductor切换页面

    前两章中, 我们已经实现了这个图书管理系统的登录窗口, 并实施了完善的单元测试. 该是时候回过头来关注我们的主窗口了. 一个功能丰富的系统一般会有多个页面, 我们图书管理系统虽然是"简易&q ...

  8. 从 DevOps 到 Serverless:通过“不用做”的方式解决“如何更高效做”的问题

    作者 | 徐进茂(罗离) JAVA 开发工程师  导读:近年来,Serverless 一词越来越热,它已经逐渐成为了一种新型的软件设计架构.和 DevOps 概念提倡的是通过一系列工具和自动化的技术来 ...

  9. 【持续更新】【pat】pat刷题技巧记录

    修改code completion快捷键位CTRL+ENTER,帮助提示函数名称 修改命令行提示符的属性,开启快速编辑模式,方便调试 添加c++11语言标准支持 开启代码调试功能 对输入的字符串进行切 ...

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

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