html - 溢出：自动与浮动和溢出：可见

Question

我正在尝试制作两个浮动 divbox-shadow以显示其容器外的阴影。它不会显示，因为它们的父级已overflow: auto设置，这会切断阴影，但仍然是必要的，因此父级不会崩溃，因为两个子div级都是浮动的。如果我将父级设置为overflow: visible它会崩溃，显然，因为子级是浮动的。谢谢你的帮助。
JS 小提琴：http: //jsfiddle.net/zJGVz/

HTML

<div id='parent'>
  <div id='child1'></div>
  <div id='child2'></div>
</div>

CSS：

#parent {
  margin: 0 auto;
  width: 200px;
  background: green;
  overflow: auto;
}
#child1 {
  width: 150px;
  height: 200px;
  float: left;
  background: pink;
  box-shadow: 0 0 10px 0 #000000;
}
#child2 {
  width: 30px;
  height: 200px;
  float: left;
  margin-left: 20px;
  background: blue;
  box-shadow: 0 0 10px 0 #000000;
}

Answer 1

margin您可以在接触父级边缘的两侧为两个子级添加 5px 。

#child1 {
  width: 700px;
  float: left;
  box-shadow: 0 0 5px 0 #000000;
  margin:0 0 5px 5px;
}
#child2 {
  width: 300px;
  float: left;
  box-shadow: 0 0 5px 0 #000000;
  margin:0 5px 5px 0;
}

请参阅 JSFiddle。

Answer 2

尝试将溢出更改为“可见”

overflow: visible;