本文为大家分享CSS3定位和浮动的基础概念，与使用方法，供大家参考，具体内容如下

一、定位

1、 css定位：

改变元素在页面上的位置

2、 css定位机制：

普通流：

浮动：

绝对布局：

3、 css定位的属性:

position 把元素放在一个静态的，相对的，绝对的，或者固定的位置中
top/left/right/botom 元素向上/左/右/下的偏移量
overflow 设置元素溢出其区域发生的事情
clip 设置元素显示的形状
vertical-align 设置元素显示的对其方式
z-index 设置元素的堆叠顺序/用来设置元素的堆叠顺序，越大越在上方/

position的属性
static 静态的（默认）
relative 相对布局（默认的）
absolute 绝对布局 （和其他的标签无关联）
fixed 固定的（不会随着页面的滚动而动）

实例代码：

CSS Code复制内容到剪贴板
  1. <body>
  2. <div id="position1"></div>
  3. <div id="position2"></div>
  4. <script>
  5. for (var i=0;i<100;i++){
  6. document.write(i+"<br/>")
  7. }
  8. </script>
  9. </body>
  10. #position1{
  11. width: 100px;
  12. height: 100px;
  13. background-color: blue;
  14. position: relative;
  15. left: 20px;
  16. top: 20px;
  17. /*用来设置元素的堆叠顺序，越大越在上方*/
  18. z-index: 2;
  19. }#position2{
  20. width: 100px;
  21. height: 100px;
  22. background-color: red;
  23. position: relative;
  24. left: 30px;
  25. top: 10px;
  26. z-index: 1;
  27. }

二、浮动

float属性可用的值:
left/right/none/inherit: 向左、右，不浮动，从父级继承。
* float

1.浮动后，脱离正常流，在浮动流中排列。任何元素都是作为块元素来显示，可设置宽高，内容撑开宽度。
2.很多浮动块在一起的时候，他们总是找与自己最近的、浮动方向相同的块来确定自己的位置，如果被迫换行，则以这个最近的元素的高度为基准起新行

clear属性： 去掉浮动属性（包括继承来的）
意思和上面对应的一样

需要清浮动的情况：

子标签浮动后，父标签的高度无法被撑开，所以需要清浮动；
新加入的标签，希望不受之前浮动元素的影响，则需要清浮动；

1.clear:both; height:0; overflow:hidden;
2.overflow:hidden; 触发layout 常用于清楚内浮动；
3.after 伪对象：给当前对象设置
.aa:after {content:”.”}
.aa {display:inline-block;}
.aa {display:block;}
想办法 触发ie6的layout渲染机制，靠运气解决了很多bug，zoom：1可以触发！！！
inline-block对内块 对外行；
4.父标签一起浮动；
5.position:absolute；清除浮动

display
display：block 以块元素显示；
display：none 内容消失，不占空间；
display：inline 以行内元素显示，可解决IE6的双倍BUG；
display：inline-block 对内块，对外行。

visibility：none
隐藏，但是依旧占用空间，影响布局

以上就是关于CSS3定位和浮动的全部内容，希望对大家的学习有所帮助。

CSS3定位和浮动详解的更多相关文章

  1. CSS3的@keyframes用法详解:

    CSS3的@keyframes用法详解:此属性与animation属性是密切相关的,关于animation属性可以参阅CSS3的animation属性用法详解一章节. 一.基本知识:keyframes ...

  2. css3(border-radius)边框圆角详解（转）

    css3(border-radius)边框圆角详解 (2014-05-19 16:16:29) 转载▼ 标签: divcss html it css3 分类: 网页技术 传统的圆角生成方案,必须使用多 ...

  3. css3系列之transform详解translate

    translate translate这个参数的,是transform 身上的,那么它有什么用呢? 其实他的作用很简单,就是平移,参考自己的位置来平移 translate() translateX() ...

  4. 【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人（详解步骤）

    [二次元的CSS]—— 用 DIV + CSS3 画咸蛋超人(详解步骤) 2016-05-17 HTML5cn 仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各部位的 ...

  5. CSS定位属性Position详解

    CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...

  6. 第98天：CSS3中transform变换详解

    transform变换详解 本文主要介绍变形transform. Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放sc ...

  7. CSS3 基础(1)——选择器详解

    CSS3选择器详解 一. 属性选择器 在CSS3中,追加了三个属性选择器分别为:[att*=val].[att^=val]和[att$=val],使得属性选择器有了通配符的概念. 选择器 示例 描述 ...

  8. 第97天：CSS3渐变和过渡详解

    一.渐变 渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性. 可分为线性渐变.径向渐变 1. 线性渐变 (grad ...

  9. CSS系列 (05)：浮动详解

    浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. -- W3C 文字环绕 float可以 ...

随机推荐

  1. JPA和hibernate的关系

    实际上,JPA的标准的定制是hibernate作者参与定制的,所以JPA是hibernate的一个总成,可以这么理解

  2. python基础-基本数据类型总结_整型(int)_字符型(str)_day3

     一.基本数据类型 1.整型(int) ps1:数字 int ,所有的功能,都放在int里a1 = 123a1 = 456 ps2: int 将字符串转换为数字 # -int # 将字符串转换为数字 ...

  3. Beta版本冲刺———第五天

    会议照片: 项目燃尽图: 1.项目进展: 困难:基本计划中增加的功能已经完成,但是在"如何保存每次游戏的分数,并将其排序列在排行榜中"遇到麻烦,现在小组都在一起协商攻克中.

  4. 1025关于explain的补充1

    https://segmentfault.com/q/1010000004195469 我的困惑 http://www.cnblogs.com/BeginMan/p/3754322.html 可以指定 ...

  5. AngularJS指令的详解

    指令作为AngularJS中最为重要的部分,所以这个框架本身也是自带了比较多的的指令,但是在开发中,这些指令通常不能满足我们的需要,所以我们也是需要自定义一些指令的.指令是我们用来扩展浏览器能力的技术 ...

  6. java 枚举的常见使用方法

    JDK1.5引入了新的类型-枚举,枚举的出现在日常开发中带来了极大的方便. 常用方法一:常量 JDK1.5之前我们平时定义系统常量,基本都是用public static final ... 出现枚举以 ...

  7. [转]easyui tree 模仿ztree 使用扁平化加载json

    原文地址:http://my.oschina.net/acitiviti/blog/349377 参考文章:http://www.jeasyuicn.com/demo/treeloadfilter.h ...

  8. Swift基础--可选绑定和守护绑定

    Swift中的可选绑定和守护绑定 1.可选绑定 格式 // 通过url来创建request对象 if let tempUrl = url { // url为可选类型,当可选类型有值,才执行大括号里面的 ...

  9. C语言中数组名作为参数进行函数传递

    用数组名作函数参数与用数组元素作实参有几点不同. 1) 用数组元素作实参时,只要数组类型和函数的形参变量的类型一致,那么作为下标变量的数组元素的类型也和函数形参变量的类型是一致的.因此,并不要求函数的 ...

  10. 【BZOJ-4521】手机号码 数位DP

    4521: [Cqoi2016]手机号码 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 303  Solved: 194[Submit][Status ...