定位元素

定位元素

1.float定位

首先，先定义三个div，如：<div class=" father"><div class="son1">float1</div><div class="son2"> float2</div> </div>,div没有任何定位效果这样的

son1上father定位的效果图是这样的：

得出结论：当float1设置float之后，float1的宽度是内容加上自己的padding，对于父容器而言，已经不是父块了，所以float2才会上来，float2的内容会围绕着float1的周围，并保持的float1所设置的margin距离。

如果float1和float2都设置左浮那么float2不在围绕着float1了。

在css中可以通过设置块元素的clear属性来消除对float的影响，主要设置三个属性值：left、right 、both。

2.position定位

2.1 absolue首先，先定义二个div，如：<div class=" father"><div class="son1">absolue</div></div>,效果这样的：

结论：当将子块的position设置为absolue时，子块已经不再从属于父块，其左边框设置的距离是相对页面body的距离，而不是父块的距离。

首先，先定义三个div，如：<div class=" father"><div class="son1">absplue1</div><div class="son2">absplue2</div> </div>,div没有任何定位效果这样的

son1上father定位的效果图是这样的：

得出结论：当float1设置absplue之后，absplue1的宽度是内容加上自己的padding，对于父容器而言，已经不是父块了，所以absplue2才会上来，float2的内容不会再围绕着absplue1的周围。

2.2 relative

将子块position属性设置为relative时，子块依然属于父块只是相对于自己在父块中的原先位置有了移动改变。