学以致用，实现几个小demo

1.预览链接：

• 用font-size解决间隙
• inline-block
• flex

2.预览链接：

• float+margin-left
• absolute+margin-left
• flex

3.预览链接

• float+margin
• flex

4.预览链接：

• margin负值
• flex

5.预览链接

• float
• flex

实现圣杯布局

思路：三者的包裹容器设置一个左右padding来装下左边的aside和ad，而main设置浮动，宽度为100%，这样他就处在中间并且宽度自适应了，将aside也设置为浮动，然后margin-left：-100%，他正好跑到了处在中间main的左上角，然后给他设置position：relative，他就正好处在浏览器左上角了，而ad设置为浮动，然后margin-left:-150px就回到了main的右上角，然后同理，设置position：relative就在浏览器右上角了
圣杯布局

实现双飞翼布局

思路：main设置浮动，宽度为100%，并且给它加一个子元素，给这个子元素设置一个左右margin，aside设置margin-left:-100%回到浏览器左侧，且设置为浮动，ad设置margin-left：adWidth，float：left，回到浏览器右侧

总结一下：双飞翼布局是利用main的子元素的左右margin，而圣杯布局是利用main的父元素的左右padding

双飞翼布局