今天我们接着分享关于浮动布局的内容。
清除浮动clear：
在css中，清除浮动是在定义了浮动元素之后设置的。
语法：
clear:取值；
| clear属性取值 | |
| 属性值 | 说明 |
| left | 清除左浮动 |
| right | 清除右浮动 |
| both | 左右浮动一起清除 |
一般情况，使用clear属性清除浮动时，很少会“clear：left”或者“clear right”来判断清除左浮动，还是清除右浮动，直接会使用clear：both。
示例代码：
<html> <head> <title>清除浮动</title> <style type="text/css"> #father { width:400px; background-color:#0c6a9d; border: 1px solid silver; } #father div { padding:10px; margin:15px; border:2px dashed red; background-color: #fcd568; } #father p { margin:15px; border:2px dashed red; background-color: #fcd568; } #box1 { float:left;} #box2 { float:left;} p { clear:both;} </style> </head> <body> <div id="father"> <div id="box1">box1</div> <div id="box2">box2</div> <p>我是浮动外围的文字</p> </div> </body></html>
预览效果后，我们发现由于p元素清除了浮动，所以p元素的前一个元素产生的浮动就不会对后续元素产生影响了。
定位布局：
浮动布局比较灵活，但是不容易控制。而定位布局的出现，使得精准定位页面中的任意元素成为可能。
CSS定位使你可以将一个元素精确地放在页面上你指定的位置。
定位布局共有四种方式。
固定定位fixed，相对定位relative，绝对定位absolute，静态定位static。
固定定位fixed：
在CSS中，固定定位是最直观，最容易理解的定位方式。当元素的position属性设定为fixed时，这个元素就被固定了，被固定的元素不会随着滚动条的拖动而改变位置。
语法：
position:fixed；top:像素值；bottom：像素值；left：像素值；right：像素值；
“position：fixed”，结合top，bottom，left，right这4个属性使用。
示例代码：
<html> <head> <title>固定定位</title> <style type="text/css"> #first { width:120px; height:600px; border: 1px solid gray; line-height: 600px; background-color: #b7f1ff; } #second { position:fixed; top: 30px; left:160px; width:60px; height:60px; border:1px solid silver; background-color:#fa16c9; } </style> </head> <body> <div id="first">无定位的元素</div> <div id="second">固定定位的元素</div> </body></html>
预览效果时，我们可以把窗体缩小刚好埋没过div元素，然后拖动滚动条，就可以看到，固定定位div在屏幕的位置像是固定住了。
相对定位relative：
采用相对定位的元素，其位置是相对于它的原始位置计算而来的。
语法：
position:relative;top:像素值；bottom：像素值；left：像素值；right：像素值；
“position:relative”，是结合top、bottom、left、right这4个属性一起使用。相对定位的容器浮上来后，其后所占的位置仍留有空位，后面的无定位元素不会挤上来。
提醒一下，默认情况下，相对定位元素的位置是相对于原始位置而言，而固定定位元素的位置是相对于浏览器而言的。
示例代码：
<html> <head> <title>相对定位</title> <style type="text/css"> #father { margin-top:30px; margin-left:30px; border: 1px solid silver; background-color:#b7f1ff; } #father div { width:100px; height:60px; margin:10px; border:1px solid silver; background-color:#fa16c9; } #box2 { position:relative; top:20px; left:40px; } </style> </head> <body> <div id="father"> <div id="box1">无定位的元素</div> <div id="box2">相对定位的元素</div> <div id="box3">无定位的元素</div> </div> </body></html>
从效果中可以看出，相对定位是对于本元素的原始位置而言的，也就是从原始位置需要偏离出多少。
