Question

之前我遇到过这个问题，不记得是否以及如何修复它。

我必须创建一个场景，我在父DIV内左右浮动2个DIV。 2个浮动DIV的高度为：auto，但是父级忽略它们（完全合乎逻辑），并且无法看到父DIV的背景。我知道问题是什么，但是有什么建议可以解决吗？或者任何其他选择，我愿意尝试一种新方法。

提前感谢您的帮助。

Answer 1

在父div中的div中需要clear:float：

.clear
{
  clear:both;
}

<div id="parent">
 <div id="left"></div>
 <div id="right"></div>

 <div class="clear"></div>
</div>

<强> There are more options available to solve this problem.

Answer 2

没有添加无意义的HTML元素，您可以clear floats the overflow way

<style type="text/css" media="screen">
    #allmychildrenfloat {
        overflow: hidden;
    }

    #allmychildrenfloat p {
        float: left;
    }
</style>
<div id="allmychildrenfloat">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec leo arcu, iaculis at, ultricies et, porta eget, urna. Nulla facilisi.</p>
    <p>dolor sit amet lorem ipsum</p>
</div>

或者您可以使用display: inline-block;而不是float属性，这取决于您的确切需求。 IE7-不理解这个值，但如果你给IE6和7 display: inline; zoom: 1;，那就没关系。如果你仍然支持Fx 2，还有另一种选择。

Answer 3

我知道，回答这个问题已经太晚了，但是跟我来这里的任何人都可以从这个答案中受益。

使用 display: inline-flex 而不是花车，快乐。

注意：您需要检查inline-flex值的支持

自动高度和浮动问题

3 个答案: