Html 带有浮动儿童的容器的高度

这是一个基本的设计问题，一直困扰着我。想象一下这个代码：

<div style='background:#ccc;'>
    <ul> 
       <li style='display:block; float:left; width:50%;'> item 1 </li>
       <li style='display:block; float:left; width:50%;'> item 2 </li>
       <li style='display:block; float:left; width:50%;'> item 3 </li>
       <li style='display:block; float:left; width:50%;'> item 4 </li>
       <li style='display:block; float:left; width:50%;'> item 5 </li>
       <li style='display:block; float:left; width:50%;'> item 6 </li>
    </ul>
</div>

项目2
项目4
项目6

除非我将包含div的css属性设置为“float:left；”
（请注意，我不内联设置元素样式，这只是示例）

---

通常，我通过给容器一个明确的高度来解决这个问题。。。但在移动世界中，这感觉很草率，并且会产生很多开销：我必须编写媒体查询来控制不同屏幕尺寸下的高度。在包含浮动元素的元素上设置自动高度的正确方法是什么？

在包含的div上设置

溢出：自动

：

项目2
项目4
项目6

快速、干净。非常感谢。