这篇文章主要介绍“CSS3定位和浮动的用法”，在日常操作中，相信很多人在CSS3定位和浮动的用法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS3定位和浮动的用法”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
本文为大家分享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复制内容到剪贴板
<body>
<div id="position1"></div>
<div id="position2"></div>
<script>
for (var i=0;i<100;i++){
document.write(i+"<br/>")
}
</script>
</body>
#position1{
width: 100px;
height: 100px;
background-color: blue;
position: relative;
left: 20px;
top: 20px;
/*用来设置元素的堆叠顺序，越大越在上方*/
z-index: 2;
}#position2{
width: 100px;
height: 100px;
background-color: red;
position: relative;
left: 30px;
top: 10px;
z-index: 1;
}
二、浮动
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定位和浮动的用法”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
