css - 盒子阴影， float :left and overflow:auto don't like eachother's situation

Question

如果我使用带有 overflow:auto 的父 div，我的盒子阴影就会停止。我该如何解决？ Here我发现我需要使用 position:relative 和 z-index，但这似乎不起作用。

HTML:

<ul>
    <li><img src="http://lorempixel.com/100/100" />Tri-tip fatback sausage speck, pork chop pastrami flank sirloin filet mignon t-bone rump ribeye chicken venison. Shankle ground round pancetta pastrami, sirloin beef ribs pork chop short loin. Salami pork boudin, ham hock flank tri-tip drumstick turkey shank short loin beef ribs kielbasa tail pastrami. Kielbasa beef ribs chicken, turkey drumstick bresaola sirloin ball tip chuck pig andouille. Cow sirloin shoulder beef ribs strip steak tongue jerky. Spare ribs capicola swine fatback, corned beef jerky kielbasa frankfurter pancetta flank sirloin short loin.</li>
    <li><img src="http://lorempixel.com/100/100" />Strip steak speck tri-tip drumstick pork chop spare ribs.</li>
    <li><img src="http://lorempixel.com/100/100" /></li>
    <li><img src="http://lorempixel.com/100/100" /></li>
</ul>​

CSS:

ul{margin:10px;position:relative;z-index:18;}
li{overflow:auto;margin-bottom:10px;position:relative;z-index:19;}
li:hover{background:lightblue;}
li img{float:left; box-shadow:0 0 10px black; margin: 0 10px 10px 0;display:block;position:relative;z-index:20;}

演示: http://jsfiddle.net/suNUK/1/

Answer 1

为此，您可以为此使用clearfix 方法。像这样写:

li{margin-bottom:10px;position:relative;z-index:19;}
li:after{
    content:'';
    clear:both;
    display:block;
}

检查这个http://jsfiddle.net/suNUK/2/