CSS元素没有正确包装

我有两个CSS类，它们不显示在容器中：

.container{
  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>

.container{
高度：自动；
边框：1px纯红；
}
.容器：：之后{
内容：“；
明确：两者皆有；
显示：块；
}    
高切先生{
浮动：左；
背景颜色：黄色；
高度：25px；
宽度：50%；
}
droite先生{
浮动：左；
宽度：50%；
高度：25px；
背景颜色：蓝色；
}

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

---

您需要使用父级的

溢出：隐藏
清除浮动


.container{
溢出：隐藏；/*将其添加到此处*/
高度：自动；
边框：1px纯红；
}
容器：：之后{
内容：“；
明确：两者皆有；
显示：块；
}
高切先生{
浮动：左；
背景颜色：黄色；
高度：25px；
宽度：50%；
}
droite先生{
浮动：左；
宽度：50%；
高度：25px；
背景颜色：蓝色；
}

感谢您提出的回滚@MichaelSchmidtNo问题。我把这个问题编辑成你问题的一个片段。所以这些问题不应该包含下面的答案。因此，我删除了代码段中的
溢出：hidden
。这是答案之前的你的片段吗？@MichaelSchmidt是的，在答案发布之前，这段片段是我的（回答者只添加了一个属性，因此我的问题和他的答案看起来相似，但不相同）。在我接受第一个用户的编辑后，我猜我的问题不清楚，但不知道如何回复我的帖子，所以再次感谢你。@J.Doe在你的代码中关于，你在
容器前面留下了一个
。你完全正确。。。在我的jsBin中，{…}
之后的
容器前面有一个
，所以我现在就添加它（还有你：D）@PraveenKumar