浮动与定位的小demo

浮动与定位的小demo

浮动元素
浮动元素（向左或向右）一直遇到父元素（左上角或右上角）或另一个浮动元素时停止浮动，如果父元素有padding值，浮动元素无法跨越padding。div是块元素，块元素独占一行，浮动元素默认会将元素转为行内块元素，
注意： 我们给a标签这样的行内元素设置float属性，默认也会转为行内块元素。
当浮动影响了页面布局时，我们需要清除浮动。清除浮动并不是没有浮动了，而是清除浮动给自己带来的影响，使自己不受它的影响。
方法：
1、给父元素overflow：hidden
2、在父元素中追加一个空元素（子元素）并设置它的clear：both。
3、直接给父元素宽高。
4、伪元素方法清除浮动

 .divfather:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden
      }

定位
定位元素是以离它最近的设置了定位属性（position值只要不是static就行，并非一定是relative）的父级元素为参考的，如果它的父级元素全都没有设置定位属性，则以浏览器可视窗口为参照。

小demo（图片来自酷狗）
代码：

		<!-- 精选歌单 -->
		<div class="selectSongList">
			<!--标题 start-->
			<div class="itemTitle">
				<h3></h3>
				<a href="" class="more">更多</a>
			</div>
			<!--标题 end-->
			<!--盒子 start-->
			<div class="itemContent">
				<!--大盒子 start-->
				<div class="cpt cptBig">
					<p class="cptT">
						<span class="icon icon-select_icon"></span>
						<span class="num">2.8万</span>
					</p>
					<img src="img/20191126183051151264.jpg" width="325" height="325" />
					<!--遮罩层 start-->
					<div class="Cover">
						<a href=""></a>
						<!--播放按钮-->
						<a href="" class="icon-play"></a>
					</div>
					<!--遮罩层 end-->
					<div class="cptB">
						<p class="songListName">日本厂牌FABTONE嘻哈大赏</p>
						<p class="songListSinger">酷小编</p>
					</div>
				</div>
				<!--大盒子 end-->
				<!--小盒子 start-->
				<div class="cpt cptMid">
					<p class="cptT">
						<span class="icon icon-select_icon"></span>
						<span class="num">38850.5万</span>
					</p>
					<img src="img/20191126152130879826.jpg" width="160" height="160" />
					<div class="Cover">
						<a href=""></a>
						<a href="" class="icon-play icon-play_s"></a>
					</div>
					<div class="cptB">
						<p class="songListName">每周推荐歌曲</p>
						<p class="songListSinger">酷狗号歌单君</p>
					</div>
				</div>
				<!--小盒子 end-->
				<!--小盒子 start-->
				<div class="cpt cptMid">
					<p class="cptT">
						<span class="icon icon-select_icon"></span>
						<span class="num">5.7万</span>
					</p>
					<img src="img/20191120155445282547.jpg" width="160" height="160" />
					<div class="Cover">
						<a href=""></a>
						<a href="" class="icon-play icon-play_s"></a>
					</div>
					<div class="cptB">
						<p class="songListName">欧美乐鉴 | 尤物出没！魔女vs.仙女，你喜欢哪一挂？</p>
						<p class="songListSinger">欧美Ku乐</p>
					</div>
				</div>
				<!--小盒子 end-->
				<!--小盒子 start-->
				<div class="cpt cptMid">
					<p class="cptT">
						<span class="icon icon-select_icon"></span>
						<span class="num">10.1万</span>
					</p>
					<img src="img/20191124114949887023.jpg" width="160" height="160" />
					<div class="Cover">
						<a href=""></a>
						<a href="" class="icon-play icon-play_s"></a>
					</div>
					<div class="cptB">
						<p class="songListName">走自己的路</p>
						<p class="songListSinger">一汽马自达</p>
					</div>
				</div>
				<!--小盒子 end-->

				<!--小盒子 start-->
				<div class="cpt cptMid">
					<p class="cptT">
						<span class="icon icon-select_icon"></span>
						<span class="num">17.9万</span>
					</p>
					<img src="img/20191121174714833766.jpg" width="160" height="160" />
					<div class="Cover">
						<a href=""></a>
						<a href="" class="icon-play icon-play_s"></a>
					</div>
					<div class="cptB">
						<p class="songListName">赋电新生，&#34;e啵&#34;能量创世而来</p>
						<p class="songListSinger">奥迪Q2Le-tron</p>
					</div>
				</div>
				<!--小盒子 end-->
			</div>
			<!--  盒子 end-->
		</div>
		<!-- 精选歌单 -->

* {
	/*清除所有内外边距*/
	padding: 0;
	margin: 0;
}

a {
	/*去掉a标签的下划线*/
	text-decoration: none
}

.selectSongList {
	/*清除浮动的影响*/
	overflow: hidden;
	width: 650px;
	font-size: 13px;
	margin: 20px auto;
}


/*标题 start*/

.itemTitle {
	height: 30px;
	padding-bottom: 30px;
}

.itemTitle {
	/*背景 设置背景的图片 不平铺  位置*/
	background: url(../img/selectlist.jpg) no-repeat 0 0;
}

.itemTitle .more {
	margin-top: 7px;
	color: #999;
	float: right;
}

.itemTitle h3 {
	float: left;
}


/*标题 end*/


/*盒子 start*/

.itemContent {
	width: 660px;
}

.cpt {
	/*左浮动*/
	float: left;
	/*给父级元素设置相对定位*/
	position: relative;
}


/*左边大盒子*/

.selectSongList .cptBig {
	width: 325px;
	height: 325px;
	margin-right: 5px;
	float: left;
}


/*上面的文字*/

.cptT {
	width: 152px;
	height: 30px;
	/*设置行高 使字体上下居中*/
	line-height: 30px;
	/*背景 设置背景的图片 不平铺  位置*/
	background: url(../img/cptTBg.png) no-repeat right center;
	color: #fff;
	/*内容居右对齐*/
	text-align: right;
	padding-right: 8px;
	/*绝对定位 */
	position: absolute;
	top: 0;
	right: 0;
}


/*耳机小图标*/

.icon-select_icon {
	/*把span元素改为行内块元素 可以设置宽高*/
	display: inline-block;
	width: 14px;
	height: 14px;
	background-position: 0 -267px;
	/*相对自己定位*/
	position: relative;
	top: 2px;
	background-image: url(../img/sprite.png);
	margin-right: 10px;
}


/*遮罩层*/

.Cover {
	width: 325px;
	height: 325px;
	background: rgba(0, 0, 0, .3);
	position: absolute;
	top: 0px;
	left: 0px;
	/*隐藏元素*/
	visibility: hidden;
}

.Cover a {
	width: 325px;
	height: 325px;
	display: block;
}

a.icon-play {
	width: 36px;
	height: 36px;
	background-image: url(../img/sprite.png);
	background-position: 0 -401px;
	position: absolute;
	right: 5px;
	bottom: 5px;
	z-index: 2;
}

.cptB {
	width: 144px;
	padding: 6px 8px;
	background: rgba(0, 0, 0, .5);
	font-size: 14px;
	height: 38px;
	position: absolute;
	bottom: 0;
	left: 0;
}

.selectSongList .cptBig .cptB {
	width: 309px;
}


/*下面的文字*/

.songListName,
.songListSinger {
	/*文本不换行*/
	white-space: nowrap;
	/*溢出隐藏*/
	overflow: hidden;
	/*文本的溢出部分用省略号代替*/
	text-overflow: ellipsis;
	line-height: 19px;
	width: 295px;
}

.songListName {
	color: #fff;
}

.songListSinger {
	color: #cfcfcf;
}


/*右边小盒子*/

.cptMid {
	width: 160px;
	height: 160px;
	padding: 0;
	margin: 0 5px 5px 0;
}


/*改变小遮罩层的宽高*/

.cptMid .Cover {
	width: 160px;
	height: 160px;
	background: rgba(0, 0, 0, .3);
}

.cptMid .Cover a {
	width: 160px;
	height: 160px;
}

.cptMid .Cover .icon-play_s {
	width: 36px;
	height: 36px;
}

.selectSongList .cptMid .cptB .songListName,
.selectSongList .cptMid .cptB .songListSinger {
	width: 100px;
}


/*鼠标放上去的显示*/

.icon-play:hover {
	background-position: 0 -360px;
}

.cpt:hover .Cover {
	/*显示*/
	visibility: visible;
}


/*盒子 end*/

效果

鼠标放上去效果

注意 hove是鼠标放上去元素显示的效果，一般不要同级给效果。如果同级给hover，另一个效果出先可能会一闪一闪的。