css - box-shadow, float:left 和 overflow:auto 不喜欢对方的情况

Question

如果我使用带有溢出：自动的父 div，我的 box-shadow 就会停止。我该如何解决？ 在这里我发现我需要使用 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/