清浮动（空标签div class="clears"或voerflow:hidden）后伪类阴影消失-什么原因

Question

.container-shadow-1 { margin:50px auto 0; width:70%; height:300px; } .container-shadow-1 h1 { margin:0 auto; text-align:center; line-height:300px; } .shadow-border { box-shadow:0 1px 5px rgba(0,0,0,0.3),0 0px 40px rgba(0,0,0,0.1) inset; position:relative; } .shadow-border:before,.shadow-border:after { content:''; border-radius:100px/10px; box-shadow:0 0 20px rgba(0,0,0,0.8); position:absolute; top:50%; right:10px; bottom:0; left:10px; z-index:-1; } .container-shadow-2 { margin:100px auto; width:972px; clear:both; overflow:hidden; } .container-shadow-2 li { margin:0 10px; width:300px; height:220px; background-color:#fff; border:2px solid #efefef; float:left; } .container-shadow-2 li.shadow-angle { box-shadow:0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset; position:relative; } .container-shadow-2 li.shadow-angle:before { content:''; width:90%; height:80%; box-shadow:0 8px 20px rgba(0,0,0,0.6); transform:skew(-12deg) rotate(-4deg); position:absolute; left:20px; bottom:8px; z-index:-2; } .container-shadow-2 li.shadow-angle:after { content:''; width:90%; height:80%; box-shadow:0 8px 20px rgba(0,0,0,0.6); transform:skew(12deg) rotate(4deg); position:absolute; right:20px; bottom:8px; z-index:-2; } .container-shadow-2 li img { padding:5px; width:290px; height:210px; display:inline-block;  }<div class="container-shadow-1 shadow-border"> <h1>BOX-SHADOW</h1> </div> <ul class="container-shadow-2">       <li class="shadow-angle"><img src="images/photo1.jpg"/></li>       <li class="shadow-angle"><img src="images/photo2.jpg"/></li>       <li class="shadow-angle"><img src="images/photo3.jpg"/></li>    </ul>

Answer 1

是不是超过他的作用域  或者 结构出错了 你给个更大的权值让他加载阴影