1、使用float时,可以说是用于布局,取值主要有left、right、none。就是将该块的元素浮动起来,在浏览器默认的情况下,该元素的位置是为空的,

即脱离了文档流而存在,如果有其他元素,那么这些元素会将该元素在浏览器中本身的位置所占据,进而将该空白部分填充。

如果元素浮动了,那么它会对其后面的元素的布局产生影响,所以在设置浮动后,需要对该块进行浮动的清除,一般采用的方法就是在该浮动元素

后面添加一个空的div来清除浮动:如以下代码:

Html代码:

<div>

<img src="../img/cbtn1.jpg" class="left">

<img src="../img/cbtn2.jpg" class="right">

<div class="clear"></div>

</div>

<div class="con">

<img src="../img/cbtn3.jpg" class="bottom">

</div>

Css代码:

.left{

float: left;

}

.right{

float:right;

}

.clear{

clear: both;

height:0px;

overflow: hidden;

}

此外,尽管元素或块进行浮动了,它的大小时根据内容的大小来决定的,如果需要重新定义区域的高度,那么可以在css里设置height属性来控制浮动层的高度。

使用position属性:

position定位布局,该属性常用的值有relative(相对),absolute(绝对);z-index;

1:设置了position:relative而不设置left,top等属性的时候,层显示的位置和不设置position属性或者position值取static时一样。

2:当一个层设置了position:relative,而且使得层位置产生相对偏移(即设置了top、left、bottom、right等属性的值)时,并不影响文本流中接下来的其他层的位置。在浏览器中的位置仍然是存占位的。

当我们设置position的值为relative时,层依然存在于文本流中,也就是不管位置是否偏移,文本流中依然为它保留了该有的位置。但当层设置了position:relative并产生偏移(设置了top,left等值)时,

该层将完全从文本流中脱离,进而以该层所在的父容器的坐标原点为参考点进行偏移,可以这理解,该层已经和同级容器中的其它元素脱离了关系,也不会对其它元素产生任何影响。

一般我们在使用定位布局的时候,通常情况下是在父级标签上设position:relative,在需要定位的层上设position:absolute;top:20px;left:10px;,这样控制起来相对比较好控制...,

但此时,需要定位的层就已经脱离了文档流而存在。

position与float属性的使用的更多相关文章

  1. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  2. CSS布局 ——从display,position, float属性谈起

    页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了<CSS Master ...

  3. 装载:对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨   对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...

  4. CSS布局 ——从display,position, float属性谈起(转)

    CSS布局 ——从display,position, float属性谈起   页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了 ...

  5. CSS position overflow float 属性 详解

    position  overflow float 几个属性比较容易混淆,写一段代码详解各自具体情况: position在w3school的可能取值: 值 描述 absolute 生成绝对定位的元素,相 ...

  6. 【总结整理】行内标签span设置position:absolute/float属性可以设置宽度与高度

    postion:absolute 跳出文本流,不是行内元素,设置宽高有效,我的理解. 引用下曹刘阳写的<编写高质量代码-web前端开发修炼之道>一书中看到的一句话:position:abs ...

  7. html5的float属性超详解(display,position, float)(文本流)

    html5的float属性超详解(display,position, float)(文本流) 一.总结 1.文本流: 2.float和绝对定位都不占文本流的位置 3.普通流是默认定位方式,就是依次按照 ...

  8. 关于css float 属性以及position:absolute 的区别。

    1.float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.div一个典型的块 ...

  9. 关于浮动float属性和position:absolute属性的区别

    最近返回头看了很多书籍,一直在纠结float属性和absolute绝对定位的区别和使用的情况,给大家分享一下自己的心得和体会吧. 1,float属性 float属性意义是让元素拜托独占一行的霸道总裁, ...

随机推荐

  1. [BZOJ1833][ZJOI2010]Count数字计数(DP)

    数位DP学傻了,怎么写最后都写不下去了. 这题严格上来说应该不属于数位DP?只是普通DP加上一些统计上的判断吧. 首先复杂度只与数的位数$\omega$有关,所以怎么挥霍都不会超. f[i][j][k ...

  2. 【分块】【树状数组】bzoj3744 Gty的妹子序列

    离散化,分块. 预处理出:ans[i][j] 第i块到第j块的逆序对数. f[i][j] 第1~i块中大于j的数的个数. g[i][j] 第1~j块中小于j的数的个数. 每次询问时对于整块部分可以O( ...

  3. 使用Python的turtle模块画出最简单的五角星

    代码如下: import turtle def main(): t = turtle.Turtle() t.hideturtle() lengthOfSize = 200 drawFivePointS ...

  4. web 中加载配置文件

    1.web.xml中配置   <!-- 加载配置文件 -->   <listener>      <description>ServletContextListen ...

  5. 使用DMV调优性能 --Burgess_Liu

    http://blog.csdn.net/burgess_liu/article/details/52813727

  6. getopt使用

    参考: http://www.gnu.org/software/libc/manual/html_node/Example-of-Getopt.html http://en.wikipedia.org ...

  7. 使用Rabbitmq.client反序列化包含Mongo.Bson.ObjectId属性实体类时抛异常

         原因分析:    队列中存储的objectId属性是字符串,反序列化字符串转换成objectid类型时报错     解决方法:    1.定义ObjectIdConverter属性类,反序列 ...

  8. Swift,结构体与类

    1.结构体(小的类就是用struct来写) struct arrow{ var x=0,y=0 } 2.类(常用) class a{ var a=10 var b=20 } var b=a() //实 ...

  9. Spring-data-jpa 之Specification in的用法

    1.一个简单的 Predicate 的示例 构建简单的Predicate示例: Predicate p1=cb.like(root.get(“name”).as(String.class), “%”+ ...

  10. PHP正则表达式之快速学习法

    1.入门简介 简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.我们可以在几乎所有的基于UNIX系统的工具中找到正则表达式的身影,例如,vi编辑器,Perl或PHP脚本语言,以及awk或 ...