时间：2021-07-01 10:21:17 帮助过：13人阅读
网页布局在现代已经不再是什么难事，几乎所有页面都能做好一个能拿得出手的布局，在现在招聘网站上也有好多要求什么div+css布局的，简直不知所言。
前端不懂布局就没法继续前了。那么怎么布局呢。
细心一点就会发现，css里面竟然没有专门为布局而设定的属性。而能达到布局效果的，主要就是用position和float这两个属性了。
在分析两个属性之前，先聊一下
html标签里面，div是常用于布局的盒子，是一个块级元素，块级元素的自带属性就是display：block。可设宽度和高度，在文档流中独占一行，就是说如果想要有两个div并排的话，就要采取手段了。
下面两个属性的用法。
float
中文翻译是叫做浮动，如果你用word比较多的话，应该不难理解浮动的意思。
优点：该元素的内容不会脱离文档流，父级元素可以让子元素撑起来。所谓撑起来就是比如父元素的宽 、高能自适应。
缺点：说实话个人经常忘记加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的方法，才能有好效果！