CSS元素未正确包装

Question

我有两个CSS类，它们没有出现在容器中：

  JSON.parse(sessionStorage.getItem('xyzObject'));

如果它们出现，红色边框必须包裹它们，事实并非如此。关于如何解决这个问题的任何建议？

jsBin

Answer 1

您需要使用overflow: hidden为父级清除浮动。

.container{
  overflow: hidden;       /* Add this here. */
  height: auto;
  border: 1px solid red;
}
container::after{
  content:"";
  clear: both;
  display: block;
}
.gauche{
  float: left;
  background-color: yellow;
  height: 25px;
  width: 50%;
}
.droite{
  float:left;
  width: 50%;
  height: 25px;
  background-color: blue;
}

<div class = 'container'>
  <div class = 'gauche'></div>
  <div class = 'droite'></div>
</div>

预览