避免使用不必要的float(display:inline,position:relative)
来源:互联网 发布:java graphics 方法 编辑:程序博客网 时间:2024/06/05 09:03
float中文翻译为浮动,很形象的翻译,在CSS很常用,当你需要吧两个块级元素定排放在同一高度上经常会用到float,先看一下float的 属性。
先看一下float可能的值:
float:left-元素向左浮动
float:right-元素向右浮动
float:none-不浮动
float:inherit-从父类的float属性继承
既然说道浮动,那么就有必要提一下浮动的清理,因为如果一个元素的float一旦被设定后将影响其左右的元素。当我们不需要浮动时应该即时清理。清 理浮动使用clear。clear的属性和float相当,只是多了一个属性
clear:left/right/inherit/none (清理浮动、不浮动、以及继承清理的属性)
clear:both-清理所有浮动
上面,简单的对浮动与清理浮动做了一个解释,浮动在实际应用种是非常广泛的,但也有很多地方不应该使用float,或者我们有更好的方法来解决。看 那些地方我们有更好的办法来解决。
1、无序链接,经常可以看到一些网站的关键字链接,或者产品关键字,已经分类等部分会用到比 较短的链接混乱排列,有些人使用<ul><li>配合float来做链接,我想这个是完全没有必要的,你可以设 定<li>标签的display:inline,吧<li>设定为线级元素来达到混排的效果,不需要使用float。甚至这样的 链接完全可以由<p><a>这样的标签来代替,岂不是更简洁?
2、我们在做一个区块的时候经常使要用more(更多)来链接相关的页面,这样的标题栏往往左边是标题,右边为more链接,很多人喜欢用 float来做,这样在float之后还要多一个标签来clear,感觉很繁琐,甚至更有人用整张图片配合热点来做,我觉的这些都不是很好的办法。其实像 这种效果完全可以用定位来做,设定title的position:relative。然后定义more这个标签的right:0或者不需要那么右,你可以 详细设定它的位置。这样省去了float以及clear,结构也更清晰了。
3、多列不规则布局,我们经常要用到3列布局,这种布局由于规则,但是为了美观,我们必须定义3列的总宽度,但是根据CSS中浮动的总宽必 须<99%的父标签宽度,否则经常会在某些浏览器下面出错,但是99%的宽在宽屏显示器下面很明显会出现10px以上的错位,所以这是一个很郁闷的 问题,其实在碰到这类问题时我们应该有限使用position定位来解决问题,而不是浮动,这个问题在这里就不多说了,下面会有一篇关于定位的详细文章。
总结一下,CSS下面的浮动,虽然很是常用,但是我们要坚持几条原则,能有更好的解决办法(display,position)的时候我们坚决使用 float,同一高度的浮动总宽度(包括margin,padding)应该小于等于(<)父元素的宽度,记住是小于,而不是等于,如果是等于可能 你会在别的浏览器上看到你不想看到的结果。
- 避免使用不必要的float(display:inline,position:relative)
- 避免不必要的float
- position:absolute、float、display:inline-block
- position:relative和float的区别
- display:inline与float:left的区别
- float:left和display:inline的区别
- 'display'、'position' 和 'float' 的相互关系
- 关于display,position,float的一些认识
- display, position和float的关系
- CSS备忘录(Float,Position,Div,inline)
- Css: position float display
- css position属性 以及 float、display、position的问题整合
- 避免不必要的使用被检查异常
- position+float+display一点理解
- float、position与display关系
- 关于使用position:relative居中的问题
- 澄清display:inline;与float:left;的用途
- 对display:inline;与float:left;的认识
- MySQL临时表的简单用法 在大数据量时有时会加快查询速度
- js 文件上传插件(支持上传进度信息)
- tp中订单详情中ajax更换收货地址。
- java抽象类与接口的区别
- Centos pip install mysqlclient Error
- 避免使用不必要的float(display:inline,position:relative)
- Qml底部导航
- day2-上 初识接口测试
- Android基础面试题
- 面试题集锦(持续更新)
- [剑指offer]面试题56:链表中环的入口结点
- 看图说话之二叉排序树
- ch01 OpenCV图像坐标系
- stratum协议原理