HTML&CSS2.1基础利用浮动、定位实现圣杯布局、双飞翼布局、伪等高布局、黏连布局，解决浮动元素高度塌陷问题，解决相邻垂直外边距重叠问题

定位

1.定位元素参照于包含块来定位（均会覆盖原来文档流的元素）
相对定位relative：相对与原来自身位置移动，元素并没有脱离文档流，原来的位置让仍然保持
绝对定位absolute：相对于其自身相邻的开启了定位的祖先元素进行定位的，如果其祖先元素均没有开启定位，则相对浏览器进行定位。
				脱离文档流
固定定位fixed：相对于浏览器窗口定位，固定定位不随滚动条滚动。
				脱离文档流。
				
2.什么是初始包含块
是一个视窗大小的矩形，不等于视窗。

3.left right top bottom width height的默认值均为auto
margin padding的默认值为0

4.百分比参照于谁
子元素的width,height均参照于包含块的width和height
子元素的padding，margin均参照于包含块的width

left包含块的width
top包含块的height

浮动

有文字的上下两个div块元素实际上各有两层，一层是上面的文字，一层是下面的背景
如果上面的div元素浮动起来，则下面div元素的背景层移上去，文字层卡在下面

三列布局

定位方法实现布局（不好，由于right的初始化包含块是body，导致当页面小于最小宽度显示时把middle挤到后面）
1.两边固定，中间自适应
2.当中列的文字要完整显示
给中间列：#middle{
padding:0 200px;
}
3.中间列必须要显示，还有优先显示
body的宽度最小为min-width=2*left+right

浮动方法实现三列布局（可以实现但是网页加载的时候可能会出现middle最后还没有加载出来的现象）

1.让div的left左浮动，div的right右浮动
2.div块放置的时候，先放left再放right再放middle（因为middle没有浮动，他是块元素，div的right即使浮动了也上不来）

解决浮动元素高度塌陷问题（清除浮动）

.clearfix:after{
	content="";
	display:table;
	clear:both;
}

解决相邻垂直外边距重叠问题

垂直方向的相邻两个盒子外边距发生外边距的重叠
	 * 1.兄弟元素之间的相邻外边距取最大值,不是相加
	 * 2.父子元素的垂直外边距相邻了，子元素的外边距会设置给父元素
解决方法：
1.  .box1:before{
	content: "";
	display: table;
	clear: both;
}
2.给父元素设置样式（不好，会影响父元素可见框的大小）
①给父元素设置一个上边框（与子元素隔开）
	border-top：1px  red solid;
②给父元素设置一个上内边距（与子元素隔开）
	padding-top:1px;
3.给子元素设置一个上外边距，使子元素下移(不行，会导致父元素也和子元素一起下移，除非用样式隔开)
    margin-top：100px；

圣杯布局（重要！）

1.两边固定，中间自适应
2.中间列的文字要完整显示
3.中间列要优先显示
步骤：(middle放在最前面，宽为100%)
1.三个元素均浮动：搭建完整布局框架
2.margin为负值：左为-100%，右为-200px
调整旁边两列div的位置，使三列布局调整到一行上
3.设置三列的父元素：padding：0 200px  使其往里缩
4.左右两边div使用相对定位：调整旁边两列的位置，使两列位置调整到两头

伪等高布局

圣杯布局时会如果某一列的文字过多，会撑开div框，导致背景不一样高。
解决办法：
1.各列各个div的padding-bottom：10000px（使各列的背景颜色溢出）
2.各列各个div的margin-bottom：-10000px（使各列各个div的边框缩回）
3.整个父元素overflow：hidden（隐藏溢出的元素背景）

解决ie6下fixed失效的问题

( ps：如果HTML和body的overflow都为scroll，则HTML的作用给文档，body作用给自己
	如果HTML和body的overflow其中一个为scroll，则作用给文档 )
	
怎么使用绝对定位来模拟固定定位：
1.禁止系统滚动条：
html{
	height:100%;
	overflow:hidden;
}
2.显示body的滚动条
body{	
	overflow:scroll;
	height:100%;
}
3.出现的是body的滚动条，不是HTML的，所以滑动滚动条绝对定位的元素不会动

双飞翼布局

步骤：(middle放在最前面，宽为100%)
1.三个元素均浮动：搭建完整布局框架
2.margin为负值：左为-100%，右为-200px
调整旁边两列div的位置，使三列布局调整到一行上
3.给中间的middle在设置一个子元素div，将padding：0 200px

###stickyFooter经典的“粘连”footer布局
我们有一块内容：
1.当的高度足够长的时候，< footer>应该紧跟在元素的后面。
2.当元素比较短的时候(比如小于屏隔的高度)我们期望这 个< footer> 元素能够“粘连”在屏幕的底部

格式：
<div id="wrap">
		<div class="main">
			main 	<br />
			main 	<br />
			main 	<br />
			main 	<br />
			main 	<br />
			main 	<br />
			main 	<br />
			main 	<br />
		</div>
	</div>
	<div id="footer">
		footer
	</div>

步骤：
1.设置HTML和body和wrap的height为100%
2.设置footer的上外边距margin-top：-50px（使其上移显示在屏幕中）
2.设置main的下内边距padding-bottom：50px（使盒子内的元素在下部不显示）