web之圣杯和双飞翼布局、float、clear、both

介绍

1、双飞翼布局的middle、left、right的父元素是body，圣杯布局的middle、left、right的父元素是container，因此双飞翼布局需要在middle中内嵌一个inside，方便在middle中写内容，而圣杯布局可以直接在middle中写内容； 2、双飞翼布局中的inside，其样式应包含左右外边距margin，为了给left和right留出位置； 3、双飞翼和圣杯布局中的left元素所包含的margin-left:-100%样式的含义是使left元素在最左侧浮动。对于双飞翼布局，100%是针对middle而言的，而圣杯布局是针对container而言的； 4、圣杯布局为了实现left和right元素在padding的留白中，需要使用position：relative相对定位，通过设置left/right移动，双飞翼布局不需要使用相对定位； 5、对于两种布局，middle的width都是100%，左右的width是定值； 6、本人在实际编写style时，习惯都用left或者margin-left定位； 7、对于圣杯布局来说，为了保证浏览器页面宽度缩小到一定距离时，元素不会窜到下一行，需要增加body的样式min-width，大小为两个left元素的宽度+一个right元素的宽度，双飞翼布局不用考虑这一问题； 8、footer一定要清除浮动，即clear：both，保证footer元素两边没有浮动元素，这样就可以使footer以块级元素一直在待在下面； 9、相比较而言，我觉得双飞翼布局在灵活性上要高于圣杯布局。

圣杯布局

<div> <div class="header"> <h3>header margin: 0; padding: 0; } body { min-width: 630px; text-align: center; } .header,
.footer { height: 10vh; } .header { background-color: #eeeeee; } .footer { clear: both; background-color: pink; } .container { padding: 0 200px 0 200px; } .container>div { float: left; height: 80vh; } .middle { width: 100%; background-color: yellow; } .left,
.right { width: 200px; position: relative; } .left { background-color: red; margin-left: -100%; left: -200px; } .right { background-color: green; margin-left: -200px; left: 200px; } 

双飞翼布局

<div> <div class="header">header margin: 0; padding: 0; } body { min-width: 500px; height: 100vh; font-weight: 700; text-align: center; } .header,
.footer { background-color: #999999; width: 100%; height: 10vh; } .footer { clear: both; } .container { width: 100%; } .center,
.left,
.right { float: left; height: 80vh; } .center { width: 100vw; background-color: pink; } .center .main { margin: 0 200px 0 200px; } .left,
.right { width: 200px; } .left { margin-left: -100%; background-color: #ff0000; } .right { margin-left: -200px; background-color: yellow; }