CSS：流体包装高度取决于浮动元素

Question

我知道这个问题可能是12324次，但我仍然找不到任何可靠的答案：/

以下是示例代码： http://tinkerbin.com/c0wqtfSa

根据浮动图像，换行应采用自动高度，但如何？ ：/

非常感谢!!!

ps，我不能添加任何额外的div，如“clear：both”，它应该是只有css的解决方案

Answer 1

尝试添加

Overflow: auto;

到你的包装div，例如：http://tinkerbin.com/pxFxaNX2

Answer 2

在＆lt;之后添加<div style="clear:both"></div> p>

你需要在浮动元素之后清除......

所以：

    <div class="wrap">
      <div class="imagefloat"></div>
      <p>sldkjfn asdhbf sdjlbhgls dhjbfg ljdshbfgl jsdbfgljh dsgf sgf</p>
      <div style="clear:both"></div>
    </div>

Answer 3

使用clear:both，如下所示：

<div class="wrap">
  <div class="imagefloat"></div>
  <p>sldkjfn asdhbf sdjlbhgls dhjbfg ljdshbfgl jsdbfgljh dsgf sgf</p>
  <div style="clear:both;"></div>
</div>

Answer 4

你只需要在你的包裹div上设置溢出和宽度，例如

overflow:hidden

Answer 5

您应该使用clearfix解决方法。阅读：http://www.webtoolkit.info/css-clearfix.html

你需要的是：

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
     display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

然后只需将clearfix类添加到“wrap”div

Answer 6

非常简单快速地修复它以使包装div也浮动。这将使其自动将其大小更改为in中的所有浮动元素，因此：

.wrap {
    float:left;
    border:1px solid #000;
    width: 500px;
    padding: 20px;
}

这是否是项目的选项取决于布局的其余部分。