Html 包含浮动元素的父元素上没有背景

大家好。我是css的新手，我尝试在一个div标记中浮动两个div标记，但是我得到了以下结果

我给了父div标签一个浅灰色的背景，所以我知道某个地方出了问题，因为背景在我浮动div标签之后消失了

下面是我的css

.menu.container {
    width: 100%;
    background-color: #F0F0F0;
}

.category {
    float: left;
}

---

非常感谢你的帮助

浮动元素时，父容器不接收有关浮动元素的宽度或高度的信息

如果您只想以水平方式调整体育和新闻，请尝试以下操作：

.category {
    display:inline-block;
}

---

“display:inline block”形成一个块元素，该元素在一行与另一行之间。

即使这样，也可以帮助您使用bourbon或sass来更轻松地实现css。你可以看看这个视频，这是多么容易建立css。