在网页布局中，使用float有不少好处，可以为你带来更加自由的布局，还可以自动根据浏览器改变布局效果。但是使用多了你也可能发现有一个问题，使用了float之后，外层的div不会撑高，导致布局出现坍塌。这里有一个解决方案是使用inline-box来布局（当然你也可以清楚浮动）。
下面给出一个demo：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>使用inline-box代替float</title> <style> .main { border: 1px solid black; width: 360px; height: 180px; } .main img { height: 160px; margin: 10px; } .main ul { display: inline-block;*display:inline;zoom:1;vertical-align:15px;} </style> </head> <body> <div class="main"> <img src="http://202.192.128.41/xyw/UserFiles/2013-6/13/201361316733169.jpg" alt="叶小钗" /> <ul> <li>湛江师范学院</li> <li>湛江师范学院</li> <li>湛江师范学院</li> <li>湛江师范学院</li> <li>湛江师范学院</li> <li>湛江师范学院</li> <li>湛江师范学院</li> <li>湛江师范学院</li> </ul> </div> </body> </html>
就这样，你也可以实现左右布局而不必使用float。*display:inline;zoom:1;这两句是为了兼容IE6这些旧浏览器而写的。