2.margin 负间距

父元素设置teable-cell元素,利用三层结构模拟父子结构

float布局实现方式实现步骤：

flex实现方式：

绝对定位实现方式：实现步骤：

普通布局实现：实现步骤：

三栏式布局的七种布局方式：float布局、绝对定位布局、圣杯布局、双飞翼布局、Flex布局、表格布局、网格布局

实现步骤：1.左右两栏设置float属性使其脱离文档流左边栏设置 float:left, 右边栏设置float: right2.给中间元素设置margin-left、和margin-right，设置margin的原因是当中间元素高度超出左右两边时，中间元素会被覆盖3.为了不影响其他元素，给父元素清除浮动

缺点：使用的时候只需要注意一定要清除浮动

实现步骤

缺点：绝对定位是脱离文档流的，意味着下面的所有子元素也会脱离文档流，导致了这种方法的有效性和可使用性是比较差的

实现步骤

实现步骤

和圣杯布局类似，只是处理中间栏部分内容被遮挡问题的解决方案有所不同

实现步骤

极其灵活(还有其他实现方式)，需要注意浏览器兼容性

实现步骤

这种布局方式能使得三栏的高度是统一的，但不能使main放在最前面得到最先渲染

实现步骤

使用起来极其方便,代码简介,但是兼容性很差

实现步骤：

实现思路：

实现步骤：1.父元素设置dispaly:table, table布局天然就具有等高的特性。

实现步骤：

实现方式一：

实现方式二：

缺点：使用inline-block会有小的间隙

实现步骤：

实现步骤：

实现步骤：

缺点：两种实现方式都只能从上往下排列，不能从左往右排列