布局用position还是float？ - Aoker

　　优点：该元素的内容不会脱离文档流，父级元素可以让子元素撑起来。所谓撑起来就是比如父元素的宽 、高能自适应。

　　缺点：说实话个人经常忘记加clear，所以不喜欢用float去布局。另外由于是浮动的。文档流不会出现重叠的情况。有时候布局会乱掉。

　　position

　　中文翻译叫定位。position有四个值，static(没有定位)，fixed(固定定位），relative(相对定位），absolute(绝对定位)；

　　static很少用（几乎没用过），暂且不聊；position：relative可用与微调，在原位置上通过top、left、right、bottom来偏移距离。设置了position：absolute的块级元素会脱离文档流，就是说如果设置了float，float是没有效果的，并且能出现两个块级元素重叠的效果，position：absolute的父级元素一般会设置position：relative，用于限制position：absolute的活动范围。

　　优点：简直就是坐标系，指哪打哪。给我一堆松散同级的元素都能布出一个漂亮的局。

　　缺点：子元素脱离了文档流，父级元素的自适应没有了，高度不再自适应。

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

　　那么布局用什么好呢？你喜欢用什么就用呗。开心就好，样式而已，都没有改变html的结构，但是最好不要一起用于同级的布局中，写着很乱，局也容易乱。

　　个人喜欢用position。

　　所以这里在给出一个解决父级高度宽度自适应的方法。就是用js啦。

 1 DOCTYPE html>
 2 html lang="en">
 3 head>
 4     meta charset="UTF-8">
 5     title>Documenttitle>
 6     style type="text/css">
 7     #person{position: relative; margin: 0 auto 0; width: 100px; background: yellow;}
 8     #son{ position: absolute; top: 10px; left: 0; width: 50px; height: 1000px; background: red; }
 9     style>
10 head>
11 body>
12     div id="person">
13         div id="son">div>
14     div>
15 script>
16     document.getElementById('person').style.height = document.getElementById('son').offsetHeight + 20 + 'px';
17 script>
18 body>
19 html>

温馨提示：要灵活使用js的方法，才能有好效果！