常见的布局方式有哪些？解释不同解决方案的优缺点
摘自今日头条用户：代码开发
原文链接：
https://www.toutiao.com/a6671145738690363917/?tt_from=mobile_qq&utm_campaign=client_share×tamp=1560782203&app=news_article&utm_source=mobile_qq&utm_medium=toutiao_android&req_id=2019061722364201002507914693856D5&group_id=6671145738690363917
居中布局
水平居中
子元素于父元素水平居中，子元素与父元素宽度均可变。
inline-block + text-align
优点
- 兼容性佳（甚至可以兼容 IE 6 和 IE 7）
table + margin
display: table 在表现上类似 block 元素，但是宽度为内容宽。
优点
- 无需设置父元素样式 （支持 IE 8 及其以上版本）
absolute + transform
优点
- 绝对定位脱离文档流，不会对后续元素的布局造成影响。
缺点
- transform 为 CSS3 属性，有兼容性问题
flex + justify-content
优点
- 只需设置父节点属性，无需设置子元素
缺点
- 有兼容性问题
垂直居中
子元素于父元素垂直居中且其（子元素与父元素）高度均可变。
table-cell + vertical-align
优点
- 兼容性好（支持 IE 8）
absolute + transform
优点
- 绝对定位脱离文档流，不会对后续元素的布局造成影响。但如果绝对定位元素是唯一的元素则父元素也会失去高度（文中添加了300px,方便查看）。
缺点
- transform 为 CSS3 属性，有兼容性问题
flex + align-items
优点
- 只需设置父节点属性，无需设置子元素
缺点
- 有兼容性问题
水平与垂直 都居中
子元素于父元素垂直及水平居中且其（子元素与父元素）高度宽度均可变。
inline-block + text-align + table-cell + vertical-align
优点
- 兼容性好
absolute + transform
优点
- 绝对定位脱离文档流，不会对后续元素的布局造成影响。
缺点
- transform 为 CSS3 属性，有兼容性问题
flex + justify-content + align-items
优点
- 只需设置父节点属性，无需设置子元素
缺点
- 有兼容性问题
多列布局
多列布局在网页中非常常见（例如两列布局），多列布局可以是两列定宽，一列自适应， 或者多列不定宽一列自适应还有等分布局等。
一列定宽，一列自适应
float + margin
IE 6 中会有3像素的 BUG，解决方法可以在 .left 加入 margin-left:-3px。
float + margin + (fix) 改造版
此方法不会存在 IE 6 中3像素的 BUG，但 .left 不可选择， 需要设置 .left {position: relative} 来提高层级。 此方法可以适用于多版本浏览器（包括 IE6）。缺点是多余的 HTML 文本结构。
float + overflow
设置 overflow: hidden 会触发 BFC 模式（Block Formatting Context）块级格式化文本。 BFC 中的内容与外界的元素是隔离的。
优点
- 样式简单
缺点
- 不支持 IE 6
table
table 的显示特性为每列的单元格宽度合一定等与表格宽度。 table-layout: fixed; 可加速渲染，也是设定布局优先。
table-cell 中不可以设置 margin 但是可以通过 padding 来设置间距。
flex
flex-item 默认为内容宽度。
缺点
- 低版本浏览器兼容问题
- 性能问题，只适合小范围布局。
两列定宽，一列自适应
多列定宽的实现可以更具单列定宽的例子进行修改与实现。
一列不定宽加一列自适应
不定宽的宽度为内容决定，下面为可以实现此效果的方法：
- float + overflow，此方法在 IE6 中有兼容性问题
- table，此方法在 IE6 中有兼容性问题
- flex，此方法在 IE9及其以下版本中有兼容性问题
多列不定宽加一列自适应
其解决方案同一列不定宽加一列自适应相仿。
多列等分布局
每一列的宽度和间距均相等，下面为多列等分布局的布局特定。
父容器宽度为 C，C = W * N + G * N - G => C + G = (W + G) * N。
float
此方法可以完美兼容 IE8 以上版本。 NOTE+：此方法结构和样式具有耦合性。
table
缺点是多了文本结果
flex
flex 的特性为分配剩余空间。 NOTE+：兼容性有问题。
table
table 的特性为每列等宽，每行等高可以用于解决此需求。
flex
flex 默认的 align-items 的值为 stretch。
float
此方法为伪等高（只有背景显示高度相等），左右真实的高度其实不相等。 此方法兼容性较好。
