html中 float、position定位问题

float是浮动，如果设置小盒子浮动，小盒子浮动的距离是根据小盒子前一个浮动兄弟元素的位置浮动的。所以一般大盒子里面的小盒子要么都浮动，要么都不浮动。

postiton是定位，有absolute和relative，fixed。一个定位的元素一定是被其他元素层层包起来的，至少是body包起来。absolute是根据包起来的定位元素定位的，如果包他的元素都没设置position，那就根据body定位。relative是相对定位，相对于包起它的元素定位的。fixed是根据屏幕定位的。

一般用absolute的话，都把包这个小盒子的大盒子设置为relative。这样小盒子的absolute会根据包它的大盒子绝对定位。

、首先新建一个html页面，然后在这个html代码页面创建一个<div>标签，同时给这个<div>添加一个class类为footer。

2、然后设置footer类，把div固定在底部。创建<style>标签，在该标签内设置通过position: fixedbottom:0设置footer类样式，把div固定在底部。

css样式代码：

.footer{

height: 100px

width: 100%

background-color: #ddd

position: fixed

bottom: 0

}

3、保存html代码，然后使用浏览器打开即可看到不管如何放大缩小浏览器div都是固定在底部的。

让绿色的div包含红色的div,这样红色的盒子就可以相对绿色的盒子定位

代码如

<div  绿色的盒子>

        <div 红色的盒子></div>

</div>

---