一、定位
1.相对定位position: relative; 父级的定位属性通常是相对定位
相对定位,是相对于元素原来位置进行移动,仍在文档流中
2.绝对定位 position:absolute;
绝对定位使当前元素脱离了文档流,相当于在文档流中删除了这个元素
4.固定定位 position:fixed;
元素脱离文档流,相对于窗口定位,固定在页面上,并且不随页面滚动(如在线QQ客服)
二、浮动
1.浮动的原理
浮动元素脱离了文档流, 如果第二个色块也浮动的话,第二个色块也脱离了文档流,与第一个是在同一个平面中,它会一直向右侧移动,直到碰到窗口最右侧停止。
将行内元素进行浮动后,将会脱离文档流,从而使其支持宽高设置。
2.同级元素之间的清除浮动的技巧
clear: left; 清除左浮动:该元素的左边不允许出现浮动元素而当前它的左边有浮动元素,而自己本身又是块元素,只能掉到下一行首开始显示。
clear: right;同上
clear:both;该元素的左右二边都禁止出现浮动元素
3.层次元素之间的清除浮动的技巧
让父元素包住浮动的子元素,给父元素添加:after伪类,在后面添加一个空元素,直接设置它的属性即可
.parent:after {
/*1.添加一个空元素*/
content: '';
/*2.默认为行内元素,所以要转为块元素*/
display: block;
/*3.直接清除二边的浮动*/
clear: both;
/*如果ie下显示有问题,可以加上*/
/*z-index: 1;*/
/*可能你看过有的地方是这样写的:*/
/*添加一个空格*/
/*content: '\0020';*/
/*然后让这个空格高度为0,这样就根本不会显示出来*/
/*height: 0;*/
}