前端网站5种布局

前端基本布局分大致5种，table布局，float 布局，absolute布局，flexbox布局，grid布局。

假设高度已知，写出三栏布局，其中左右宽度各为300px，中间自适应。

（一）table 布局

在实际的项目开发过程中，不建议用table进行布局

缺点：
1. table 比其他html标签占更多的字节。造成下载时间延迟，占用服务器更多的流量资源（代码冗余）
2.table 会阻挡浏览其渲染引擎的渲染顺序，会延迟页面的生成速度，让用户等待时间更久。
3.灵活性差，一旦设计确定，后期很难通过CSS让它展现新的面貌。
4.不利于搜索引擎抓取信息，直接影响到网站的排名

优点：
1.兼容性好.
2.容易上手

（二）float 布局

float 属性定义元素在哪个方向浮动。

初始应用：让匿名inline boxes性质的文字环绕图片显示

现在应用：任何元素都可浮动。如一个元素设置为浮动元素，浮动元素无论最初什么都会变成一个行级块级元素，拥有display:inline-block属性。

float：left 。沿着父容器顶部向左推入容器，如果卡住推不动了，判断当前位置能否全部显示该子容器，如果能则完成，如果不能继续找空档往里推。

缺点：脱离文档流，需要清楚浮动，**高度塌陷（float的破坏性主要是指它会使父容器的高度塌陷，也就是父元素在高度计算的时候会忽略浮动的元素）。
优点：兼容性好，比较简单

参考：

(三)absolute布局

relative属性：脱离文档流，但保留占位符，其偏移位置是相对于本身在正常文档流中时的位置

脱离文档流是说设置了relative属性之后，元素不在z-index:0;的正常文档流中，其z-index的值>0，但保留占位符，就是在正常文档流中位置保留着，后继元素不能占位，然后相对于本身正常位置进行偏移。

absolute：完全脱离文档流，不保留占位符，其元素定位是相对于其父级及以上，一直追溯至设置了position:relative或absolute或fixed属性的外层元素（包含块），如果其外层元素均未设置position属性，则定位是相对于HTML文档进行的绝对定位，并不是相对于body的定位。

缺点：脱离文档流，会导致后续元素全部脱离文档流，可用行差。