摘要：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>CSS中的浮动</title><meta name="keywords" content="CSS中的浮动"><meta name=&qu
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS中的浮动</title>
<meta name="keywords" content="CSS中的浮动">
<meta name="description" content="CSS中的浮动">
<meta name="author" content="lijinfu">
<link rel="shortcut icon" type="image/x-icon" href="http://xmn-xdm.com/img/favicon.ico">
<style type="text/css">
ul li{
list-style: none;width: 100px;height: 40px;line-height: 40px;text-align: center;background:#ccc;margin: 0px 1px;
float: center; /*float: leftleft浮动排列成靠左一排*/
}
ul li:hover{
background: orange;
}
.box{
width: 100px;height: 100px;background: #ccc;line-height: 100px;text-align: center;
float: left;
}
.main{
width: 100px;height: 100px;background: pink;line-height: 100px;text-align: center;display: none;
}
.box:hover .main{
display: block;
/*clear: both; clear: both清除左右浮动*/
</style>
</head>
<body>
<ul>
<li>足球</li>
<li>篮球</li>
<li>棒球</li>
<li>台球</li>
<li>排球</li>
</ul>
<br>
<br>
</div>
<div>身高<div>180厘米</div></div>
<div>体重<div>150斤</div></div>
<div>爱好<div>php</div></div>
<div>特长<div>打篮球</div></div>
</body>
</html>
批改老师：灭绝师太批改时间：2019-01-14 16:40:49
老师总结：前端浮动是魔鬼，一定要好好掌握……作业完成的不错
