CSS样式 - CSS定位
css定位(Positioning)属性
允许定义元素框相对于其正常位置应该改出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
一切皆为框
<1>块级元素：div、h1或p标签 即：显示为一块内容称之为 “块框“
<2>行内元素： span,strong,a等元素 即：内容显示在行中称 "行内框"
<3>使用display属性改变成框的类型
即：display:block;让行内元素设置为会计元素
display:block 升级为块级元素，和块级元素的属性一样
display:inline-block 显示为内联元素，元素前后没有换行符
1.相对定位
如果对一个元素进行相对定位，它将出现在它所在的位置上。
通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动
.adv_relative {
position: relative;
left: 30px;
top: 20px;
}
2.绝对定位
元素的位置相对于最近的已定位祖先元素，如果元素没有已定位
的祖先元素，它的位置相对于最初的包含块。
.adv_absolute {
position: absolute;
left: 30px;
top: 20px;
}
3.float浮动
float 属性定义元素在哪个方向浮动，在 CSS 中，任何元素都可以浮动
float属性定义了向哪浮动
4.清除浮动
<div style="clear: both;"></div>
div不加高度使用了浮动，边框就会不能将盒子包围起来
所以就会用到清除浮动
比如：
<!doctype html> <html> <head> <!--声明当前页面的编码集：中文编码（GBK/GB2312）,国际编码（utf-8）--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--声明当前页面的三要素--> <title>简易网页变色小按钮</title> <meta name="Keywords" content="关键词,关键词,关键词"> <meta name="description" content=""> <!--css/js--> <style type="text/css"> *{margin:0;padding:0;} body{font-size:12px;font-family:"微软雅黑";color:#666;} .di{width:400px;border:10px solid red;} .di .a{width:200px;height:400px;background-color:#ff6;float:left;} .di .b{width:200px;height:400px;background-color:#0f6;float:left;} </style> </head> <body> <h1>清除浮动</h1> <div class="di"> <div class="a"></div> <div class="b"></div> </div> </body> </html>
如果这样不加清除浮动的话，效果是这样的
盒子不给高度用浮动效果这样，显然不行，而网页中的布局经常有不给高度的情况，不定高可以随着内容延伸，所以需要处理完之后清除浮动，有两种方法，一种直接加<div style="clear:both;"></div>这个要单独给个盒子，但是要和内容同级嵌套
第二种做成通用样式
.clear{clear:both;}
<div class="clear"></div>
第二种更加常用，用到清除浮动的地方会很多，而一个一个的写显然浪费时间，同时也降低效率
加了清除浮动之后效果：
