双飞翼布局对我这样的新手来说不太好理解，光靠死记不行，理解了以后就能轻易写出来。话不多说，请看代码：
双飞翼布局
#content
#left
#right
理解双飞翼布局的几个关键点：
①main是自适应宽度的，所以width:100%;
②main、left、right都是float:left;，但是main的宽度是100%，所以left、right被挤到第二行；
③如何让left和right移动到正确的位置呢？
理解时应该考虑浮动的特性，假设main是固定宽度的，全都左浮动以后，main、left、right应该排在同一行。
那么要让left移动到左边就容易了，只需要向左边移动一个main的宽度就可以了，所以就是margin-left:-100%;
因为main的宽度是100%，要让right移动到右边，则只需要给right一个200的宽度，让它移动上去就行了，所以就是margin-left:-200px;
④此时，left和right实际上是叠在main的左右两边的，这就是在写结构时，要在main里面多写一层content的原因，只要给content一个margin:0 200px;里面的内容就不会被left和right挡住，双飞翼布局也就实现了。
双飞翼布局的好处：是淘宝团队提出一种优化写法，main写在前面，优先加载，优先渲染，而且兼容性好。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/217102.html原文链接：https://javaforall.net
