我明明左浮动了，为啥这么乱，求解
```html
html>
<html>
<head>
<meta charset="utf-8" />
<title>Hoverbox Image Gallerytitle>
<link type="text/css" rel="stylesheet" href='css/hoverbox.css'>
head>
<body>
<div id="" class="">
<h1>鼠标经过图片显示大图（hoverbox Image Gallery)h1>
<ul class="hoverbox">
<li><a href="#">
<img src="img/1.jpg" class="imgtype" />
<img src="img/1.jpg" />
a>li>
<li><a href="#">
<img src="img/2.jpg" class="imgtype" />
<img src="img/2.jpg" />
a>li>
<li><a href="#">
<img src="img/3.jpg" class="imgtype" />
<img src="img/3.jpg" />
a>li>
<li><a href="#">
<img src="img/4.png" class="imgtype" />
<img src="img/4.png" />
a>li>
<li><a href="#">
<img src="img/5.jpg" class="imgtype" />
<img src="img/5.jpg" />
a>li>
<li><a href="#">
<img src="img/6.jpg" class="imgtype" />
<img src="img/6.jpg" />
a>li>
<li><a href="#">
<img src="img/7.jpg" class="imgtype" />
<img src="img/7.jpg" />
a>li>
<li><a href="#">
<img src="img/8.jpg" class="imgtype" />
<img src="img/8.jpg" />
a>li>
ul>
div>
body>
html>
css代码如下
/*全局声明*/
*{
border: 0;/*设置边框*/
margin: 0;/*设置外边距*/
padding: 0;/*设置内边距*/
}
a{ text-decoration:none;}
/*定义图层样式*/
div{
width:720px;
height:500px;
margin:0 auto;/*水平居中*/
padding:30px;
text-align:center;/*内容居中显示*/
}
/*定义主体样式*/
body{
position:relative;/*位置属性是相对的*/
text-align: center;
}
/*定义h1样式*/
h1{
background: inherit;/*背景属性取值为继承*/
border-bottom: 1px dashed #097;/*设置下边框属性：宽度1px；样式：虚线；颜色#97*/
color:#000099;
font:17px georgia,serif;/*设置字体的大小，字体的样式1，和样式2（备选）*/
margin:0 0 10px;/*设置上外边距，左右外边距为0；下外边距为10px*/
padding:0 0 35px;;/*设置上内边距，左右内边距为0；下内边距为10px*/
text-align: center;
}
/*定义图像样式*/
.hoverbox img{
background: #fff;
border-color:#aaa #bbb #ccc #ddd;/*#aaa等同于#aaaaaa,其后同*/
border-style: solid;/*设置边框线类型*/
border-width: 1px;/*设置边框宽度*/
width:135px;
height;95px;
padding:2px;
color:deeppink;
vertical-align: top;
}
/*定义列表项样式*/
.hoverbox li{
background: #eee;
border-color:#ddd #ccc #bbb #aaa;
border-style: solid;
border-width:1px;
color: pink;
float: left;
display: inline;/*行内显示*/
position:relative;
margin: 3px;
padding:5px;
}
ul{float:left;padding: 40px;margin: 0 auto;}
/*定义hoverbox样式*/
.hoverbox{cursor: hand;list-style: none;}/*改变光标样式：系统默认；去掉列表项目前的标签*/
.hoverbox a{cursor: hand;}
.hoverbox a .imgtype{display: none;}/*大图初始加载不显示*/
.hoverbox a:hover .imgtype{/*注意： ：hover是为类，指明当鼠标划过是，a:hover表示:当鼠标划过a标签时*/
display: block;/*以块方式显示*/
position:absolute;/*绝对方式显示，图可以层叠*/
top:-33px;/*相对当前位置偏移量*/
left:-45px;
z-index:1;
}
/*定义大图样式*/
.hoverbox .imgtype{
border-color:#000;
width: 220px;
height: 170px;
}
web浏览图
css有一个冒号写成了分号，但是不知道影不影响：
.hoverbox img{
background: #fff;
border-color:#aaa #bbb #ccc #ddd;/*#aaa等同于#aaaaaa,其后同*/
border-style: solid;/*设置边框线类型*/
border-width: 1px;/*设置边框宽度*/
width:135px;
height:95px; /*原本写的是height;95px;*/
padding:2px;
color:deeppink;
vertical-align: top;
}
其实这个问题的关键就是float的浮动，li没有定高导致高度坍塌，上面那个回答对的height:95px;改掉，给了一个固定高度，就不会产生高度坍塌的问题。 最好的效果是：不使用浮动，将li设置为行级块元素display: inline-block
效果图没贴好，多了个“#left”，重新贴一下