浮动-定位

传统网页布局
标准流

float:浮动

清除浮动

额外标签法也叫隔墙法

.yy {
background: yellow;
}

		.clearfix:after {
			content:"内容";
			display: block;
			height: 0;
			clear: both;
			visibility: hidden;
		}
		
		.clearfix {
			*zoom: 1;
		}
		<div class="yy clearfix">
		<div class="box1"></div>
	</div>

clear：both 清除两边浮动
.clearfix:before,.clearfix:after{

			content: "";
			display: table;
		}
		.clearfix:after{
			clear: both;
		}
		.clearfix {
			*zoom: 1;

父级添加overflow：hidden属性
父级添加after伪元素
父级添加添加双伪元素

定位
/position: 指定定位模式;
relative：相对定位
static：静态定位、默认定位
absolute：绝对定位
fixed：固定定位，相对于浏览器进行定位/
position: relative;
/*top:顶部偏移 bottom底部偏移量 */
top: 50px;
.box1 {
position: relative;
top: 50px;
}

绝对定位 absolute

如果没有祖先元素或祖先原始没有定位，则以浏览器为准定位
如果祖先元素有定位（相对，绝对，固定），则以最近一级有定位元素作为参考点
脱标绝对定位不在占有原先的位置

固定定位
始终固定

提高盒子 层叠性 数值越大图层越高
z-index：1，-1；