今天我们接着分享关于浮动布局的内容。
清除浮动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>
从效果中可以看出，相对定位是对于本元素的原始位置而言的，也就是从原始位置需要偏离出多少。
1861
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
