清浮动（空标签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

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