布局用position还是float？ - Aoker

　　初入前端。在学习上总会有很多问题。这次就网页布局来讲讲。

　　网页布局在现代已经不再是什么难事，几乎所有页面都能做好一个能拿得出手的布局，在现在招聘网站上也有好多要求什么div+css布局的，简直不知所言。

　　前端不懂布局就没法继续前了。那么怎么布局呢。

　　细心一点就会发现，css里面竟然没有专门为布局而设定的属性。而能达到布局效果的，主要就是用position和float这两个属性了。

　　在分析两个属性之前，先聊一下

。

　　html标签里面，div是常用于布局的盒子，是一个块级元素，块级元素的自带属性就是display：block。可设宽度和高度，在文档流中独占一行，就是说如果想要有两个div并排的话，就要采取手段了。

　　下面两个属性的用法。

　　float

　　中文翻译是叫做浮动，如果你用word比较多的话，应该不难理解浮动的意思。

设置样式属性float：left之后，会允许下面的块级元素在器右边并排，如果这两个元素的宽度超出父元素的宽度，那么本该在旁边的块级元素就会浮动到下一行，并且只到遇到下一个同级的块级元素设置的clear：left才会停止。另外间距需要使用margin属性来控制。

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

　　缺点：说实话个人经常忘记加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啦。

　　

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

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