实现三栏布局5种方式

前言

前端开发中，布局是前端基础的内容，而其中三栏布局在实际开发和面试中最常见，三栏布局是指中间自适应两边固定宽，而我们经常使用的淘宝首页（pc端）就是典型的三栏布局实现的。下面总结了五种三栏布局方式，希望自己学习总结的同时对大家有所帮组。

1、左右浮动布局

效果图：

image

这种布局方式，必须先写浮动部分，最后再写中间部分，否则右浮动块会掉到下一行。

• 浮动布局优点：就是比较简单，兼容性也比较好。
• 浮动布局缺点：具是有局限性的，浮动元素是脱离文档流，会带来很多问题，比如父容器高度塌陷等。

2、绝对定位布局

• 绝对定位布局优点:快捷以及设置简单，而且也不容易出问题。
• 绝对定位布局缺点:容器脱离了文档流，后代元素也脱离了文档流，高度未知的时候，会有问题，这就导致了这种方法的有效性和可使用性是比较差的。

3、Flex布局

需要注意要将中间块放在前面，通过order来控制位置，实际高度会根据内容自适应，三栏高度统一。

• Flex布局的优点：在移动端比较常见，布局灵活，兼容性也还可以，基本能满足大多数需求。
• Flex布局的缺点: IE10才开始支持

4、Grid布局

• Grid布局优点:创建网格布局最强大和最简单的工具。实际高度会根据内容自适应，三栏高度统一。
• Grid布局缺点：唯一的缺点就是兼容性不太好。

5、表格布局

表格布局优点：兼容性很好，在Flex布局不兼容的时候（一般情况下很少不兼容），可以尝试表格布局。当内容溢出时会自动撑开父元素。

表格布局缺点:

• 无法设置栏边距
• 对seo不友好
• 当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的，然而有时候这并不是我们想要的效果。

总结

现在相信大家一般都在使用Flex布局，三栏布局当然页推荐使用Flex布局，如果有不兼容Flex那就自行斟酌选择自己觉得合适的就ok。