为什我用伪类清除浮动音量条就显示不正确呢？用clear:both就可以正常显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MyVideo</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="vContainer">
<video id="myVideo">
<source src="imooc.mp4" type="video/mp4">
您的浏览器不支持
</video>
<div class="caption">我自己的视频播放器</div>
<div class="control">
<div class="top clearfloat">
<div class="progress">
<span class="timeBar"></span>
</div>
<div class="time">
<span id="currentTime">00:00</span>
<span>/</span>
<span id="duration">00:00</span>
</div>
</div>
<div class="bottom clearfloat">
<div class="button play"></div>
<div class="button stop"></div>
<div class="button text1 text active">x1</div>
<div class="button text3 text">x3</div>
<div class="volume">
<span class="volumeBar"></span>
</div>
<div class="button sound"></div>
<div class="loading"></div>
</div>
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
.clearfloat:after{
content: '';
height: 0;
line-height: 0;
display: block;
visibility: hidden;
clear: both;
}
.vContainer{
width: 640px;
height: 360px;
margin: 30px auto;
position: relative;
overflow: hidden;
background-color: #dedede;
}
.caption{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 10px;
font-size: 20px;
font-weight: bold;
color: #ccc;
background-color: #1f1f1f;
z-index: 1;
}
.control{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
color: #ccc;
background-color: #1f1f1f;
z-index: 1;
}
.control .top{
height: 11px;
border-bottom: 1px solid #404040;
padding: 1px 5px;
background-color: #1f1f1f;
}
.control .top .progress{
height: 10px;
width: 85%;
position: relative;
float: left;
cursor: pointer;
background-color: #404040;
border-radius: 5px;
}
.control .top .progress .timeBar{
height: 100%;
position: absolute;
top: 0;
left: 0;
display: block;
border-radius: 5px;
z-index: 3;
background-color: #f9d43a;
width: 0px;
}
.control .top .time{
width: 15%;
float: right;
text-align: center;
line-height: 12px;
font-size: 0;
}
.control .top .time span{
font-size: 12px;
}
.control .bottom{
/*clear: both;*/
background-color: #1f1f1f;
}
.control .bottom .button{
float: left;
width: 32px;
height: 32px;
padding: 0 5px;
cursor: pointer;
}
.control .bottom .play{
background: url('play.png') no-repeat 7px 2px;
}
.control .bottom .pause{
background: url('pause.png') no-repeat 7px 2px;
}
.control .bottom .stop{
background: url('stop.png') no-repeat 7px 2px;
}
.control .bottom .sound{
background: url('sound.png') no-repeat 7px 2px;
}
.control .bottom .mute{
background: url('mute.png') no-repeat 7px 2px;
}
.control .bottom .text{
font-size: 16px;
line-height: 32px;
font-weight: bold;
text-align: center;
color: #777;
}
.control .bottom .active{
color: #fff;
}
.control .bottom .sound,
.control .bottom .mute {
float: right;
}
.control .bottom .volume{
position: relative;
cursor: pointer;
float: right;
width: 70px;
height: 10px;
margin-top: 10px;
margin-right: 10px;
background-color: #404040;
}
正在回答 回答被采纳积分+1
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星