CSS清除浮动方法参考：
/promiseCao/article/details/52771856
<style>*{margin: 0; padding: 0; list-style: none; font-size: 12px;}.outer{width: 560px;margin: 10px auto;border: 1px solid #000;padding: 10px 0 0 10px;}.outer>h2{text-align: center;font-size: 18px;margin-bottom: 10px;}.outer>ul{/* overflow: hidden; *//* 这里不能用overflow: hidden; 否则li里面img超出ul范围边角会被裁剪。疑问： 这里的li是浮动流， 怎么也可以撑起外层盒子的高度？？ 其实还是会导致塌陷。由后面 :after 伪元素的设置解决了这个问题。 */zoom: 1;/* zoom: 1; 什么作用？？ */}.outer>ul:after{content:".";display:block;height:0;clear:both;visibility:hidden;/* :after伪类+content 清除浮动的影响 。这些设置撑起了ul的高度。 （li是浮动流，所以撑不起外层盒子。） */}.outer>ul>li{width: 80px;height: 80px;padding: 10px;float: left;background: #f0f0f0;border: 1px solid #000;margin: 0 10px 10px 0;cursor: crosshair;position: relative;}/* 子绝父相，img参照li 定位，hover的时候才显示。由操作引发，后面显示的内容覆盖了原本的，要联想到定位这个方法！ *//* 疑问：img是属于li标签内的。所以图片的显示只能从li元素的左上角边界开始。怎么实现左上角能超出边框显示？？？ul不要设置overflow: hidden ， 就不会导致img边角被裁减。 */.outer>ul>li>img{position: absolute;left: -14px;top: -14px;display: none;border: 2px solid #000;z-index: 1;/* z-index要设置，否则img的边框被li给覆盖了。 */}.outer>ul>li:hover img{display: block;}/* .outer>ul>li:hover{background: url("imgs/1.jpg") -20px -20px no-repeat;} */</style>
