html - float :right causes parent div to shrink

Question

<div style="width:50%;"  class="outerdiv">
   <div style="">
            <div style="display:inline;">
                <span><?php echo __('Başlık :', 'goldmem');?></span>
            </div>
            <div style="display:inline; float:right;">
                    <input class="postptext" type="text" id="posttitle">
            </div>

        </div>
</div>

我有这个布局。 Outerdiv 有边框，所以我可以看到它的大小变化。这是结果:

没有 float :http://i.imgur.com/F73U0jX.png?1

带 float :http://i.imgur.com/8berzkN.png?1

如何让div的大小包含所有元素。

Answer 1

尝试将 overflow: hidden; 添加到 .outerdiv - 因为这会创建一个新的 Block Formatting Context因为它是后代(从正常流中取出，因为它们是 float 的，类似于绝对定位元素的方式，但不完全相同) - 它基本上允许容器承认 float 的存在，就好像它在正常流量。关键是要记住，如果未清除 float 或未提供新的 block 格式化上下文，正常流程中的常规 block 级元素将忽略 float 。