CSS浮动与定位（修改版）

浮动（float）：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

float属性的值：

清楚浮动的方法：

clear 属性

clear 属性规定元素的哪一侧不允许其他浮动元素。

添加一个空元素并且清理它。

.news { background-color: gray; border: solid 1px black; }.news img { float: left; }.news p { float: right; }.clear { clear: both; }

<div class="news"><img src="news-pic.jpg" /><p>some text</p><div class="clear"></div></div>

这样可以实现我们希望的效果，但是需要添加多余的代码。常常有元素可以应用 clear，但是有时候不得不为了进行布局而添加无意义的标记。

另一种清除浮动的方法（比较常用）：

/*清除浮动*/

/*解决低版本浏览器上的清除浮动问题*/

.clearfix{zoom: 1;}.clearfix:after{content: "";display: block;clear: both;}

定位：

CSS position 属性

通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。

position 属性值的含义：

static

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

相对定位：

设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。

示例：

#div1{height:100px;width:100px;float:left;background-color:#0dfaff;}#div2{height:100px;width:100px;float:left;background-color:#2928ff;position:relative;top:20px;left:50px;z-index: -1;}#div3{height:100px;width:100px;float:left;background-color:#ff4a51;}

<div id="div0"></div><div id="div1"></div><div id="div2"></div><div id="div3"></div>

实现效果：

绝对定位：

1：相对于离他最近的并且使用了定位的父元素

如果没有符合的，最后以body为基准。

2：元素原来的空间会被其他元素占用

*{margin:0;padding:0;}#div1{height:300px;width:100%;background-color:#ff659c;margin:20px0 0 20px;overflow:hidden;}#div2{height:250px;width:90%;background-color:#30ff6a;margin:20px0 0 20px;overflow:hidden;position:relative;}#div3{height:200px;width:80%;background-color:#3a3cff;overflow:hidden;margin:20px0 0 20px;}#left{height:100px;width:100px;float:left;background-color:#0dfaff;}#center{height:100px;width:100px;float:left;background-color:#f9ff40;position:absolute;top:30px;left:30px;}#right{height:100px;width:100px;float:left;background-color:#ff4a51;}

<divid="div1"></div><divid="div2"></div><divid="div3"></div><divid="left"></div><divid="center"></div><divid="right"></div>

实现效果：

固定定位：

#div1{height:1200px;background-color:red;}#backtop{height:50px;width:100px;background-color:#30ff6a;position:fixed;bottom:10px;right:10px;}

<a name="top"></a><div id="div1"></div><button id="backtop"><a href="#top">返回顶部</a></button>

实现效果：

将按钮固定在距离右边10px，距离下边10px