Question

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

<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>

<ul>元素将超出容器，除非我将包含div设置为也具有＆＃34; float：left;＆＃34;的css属性（请注意，我没有内联我的元素，这仅仅是为了示例）。

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

Answer 1

在包含div上设置overflow:auto：

<div style='background:#ccc;overflow:auto;'>
    <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>

当你浮动孩子时，祖先会崩溃并设置溢出会恢复你所追求的行为。

有漂浮孩子的容器的高度

1 个答案: