少用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>解决了,但自己不是特别明白,又在网上查 ...
随机推荐
- 在虚拟机上的关于Apache(阿帕奇)(4)基于域名访问网站
这篇随笔是基于域名访问网站,和前后两篇文章基于ip和基于端口一起练习效果更好 首先配置网卡Ip地址与hosts文件 输入命令: vi /etc/hosts/ (每行只能写一条,格式为IP地址+空格 ...
- Mybatis:配置解析
配置解析 mybatis-config.xml(Mybatis核心配置文件)深深影响了Mybatis行为的设置和属性信息. 能配置的的内容 当然,并不是所有都是我们经常使用到的,下面选择经常使用的配 ...
- Pandas文本数据处理
先初始化数据 import pandas as pd import numpy as np index = pd.Index(data=["Tom", "Bob" ...
- kettle6.1如何连接mongodb
. Kettle的结构图如下: 2.介绍各个组件详细情况 表输入:通常是你的sql语句,这个会Kettle基础知识的都会不介绍了 JSON Output如下: MogoDB output如下: 下面这 ...
- Android 开发中是否应该使用枚举?
本文由咕咚发布在个人博客,转载请注明出处. 本文永久地址:https://gudong.name/2019/11/04/use-enum-or-not.html 在 Android 官方文档推出性能优 ...
- 8.1 NOIP模拟11
8.1 NOIP模拟 11 今天上午返校之后,颓了一会,然后下午就开始考试,中午睡着了,然后刚开始考试的时候就困的一匹,我一看T1,woc,这不是之前线段树专题的题啊,和那道题差不多,所以我..... ...
- linux下的压缩解压命令
.gz解压1:gunzip FileName.gz解压2:gzip -d FileName.gz压缩:gzip FileName .tar.gz 和 .tgz解压:tar zxvf FileName. ...
- 开发板,pc,虚拟机三者如何互相ping通
1 安装虚拟机时,主机和虚拟机必须是桥接网卡,保证了ip 同一:192,168,1,xx 2 打开虚拟机之前,先把pc机的无线网卡禁用掉只能使用本地连接,pc通过网线连接上网,打开虚拟机,命令行输入: ...
- Linux基于webRTC的二次开发(二) 实现远程桌面共享
webRTC中的desktop_capture模块提供了捕获桌面和捕获窗口的相关功能,而实现远程桌面共享功能需要将desktop_capture捕获的画面作为peerconnection的视频源,下面 ...
- linux搭建简易网站
1.检查环境 getenforce #查看seLinux运行状态 Enforcing #强行执行 setenforce #临时关闭selinux vim /etc/selinux/config #编辑 ...