table布局、float布局、position布局、flex布局、grid布局
表格(table)布局
将整个页面作为一个表格进行处理，通过设置单元格的大小来实现布局
-
优点：简单、兼容性好
-
缺点：灵活性差，占用资源多，页面渲染慢，搜索引擎抓取信息不方便
考虑到这样的缺点，table布局基本已被淘汰
浮动(float)布局
通过float属性，将元素设置为浮动元素，进行排列布局
-
优点：简单、兼容性好
-
缺点：会出现占位问题，脱离文档流，有时会造成父容器高度塌陷
目前仍有很多网页采用float布局，可以达到简单网页的基本要求，但是考虑到清除浮动很麻烦，float布局的使用也逐渐减少
定位(position)布局
通过position属性，将元素定位到要求的位置进行布局
-
优点：简单粗暴，便于和js搭配
-
缺点：绝对定位完全脱离文档流，可用性差
目前采用position布局的网页也不少，很多都是老网页没更新，考虑到实用性较低，使用率也逐渐减少
弹性(flex)布局
flex布局是一种一维布局模型，一次只能处理一个维度（一行或者一列）上的元素布局
主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序)
以最佳方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）
- 优点：简单易上手
- 缺点：浏览器兼容性比较差
flex布局是目前三大主流布局方式（float布局、flex布局、grid布局）之一，其“弹性”的特点很好的使用于响应式页面的开发
网格(gird)布局
grid布局是CSS中最强大的布局系统，是一个二维的栅格布局系统，意味着它可以同时处理列和行
- 优点：通过行列号精确定位，对齐方便
- 缺点：浏览器兼容性比较差
grid布局也是目前三大主流布局方式之一，不仅适用响应式页面的开发，同时也提供了更加灵活行列布局设置
结语
欢迎热爱编程的小伙伴关注我的github博客
以及我的github仓库
里面有一些前端小技巧以及python算法设计跟大家一起分享
我们一起每天进步一点点！
