web之圣杯和双飞翼布局floatclearboth

Posted 2022-11-24 web半晨

文章目录

• 介绍
• 圣杯布局
• 双飞翼布局

---

介绍

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</h3>
	</div>
	
	<div class="container">
		<div class="middle">
			<h3>middle</h3>
		</div>
		<div class="left">
			<h3>left</h3>
		</div>
		<div class="right">
			<h3>right</h3>
		</div>
	</div>
	
	<div class="footer">
		<h3>footer</h3>
	</div>
</div>

---

* 
	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</div>
	
	<div class='container'>
		<div class='center'>
			<div class='main'>center</div>
		</div>
		<div class='left'>left</div>
		<div class='right'>right</div>
	</div>
	
	<div class="footer">footer</div>
</div>

---

* 
	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;