Html 在clearfix之后，阻止两个div具有相同的高度

我遇到了一个问题，我用简短的代码描述了它

.div1{
身高：100%；
宽度：200px；
浮动：左；
背景：#F00；
}
.第2分部{
左边距：200px；
背景：#000；
}
.第3分部{
背景：#0F0；
}
.clearfix{}.clearfix:之后{
显示：块；
内容：“1”；
可见性：隐藏；
高度：0px；
字体大小：0px；
明确：两者皆有；
}
身体
html，
.集装箱{
身高：100%；
}
.浮动{
浮动：左；
高度：300px；
宽度：100%；
背景：#00F；
}

你能画出你期望的结果吗？期望：绿色方块不应该露出来，它应该与蓝色方块具有相同的高度。这就是你想要的？@Tushar smart solution。但使用“显示：表格”并不是那么优雅。你能解释一下为什么clearfix会产生你所期望的绿块效果吗？