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

【问题标题】：CSS: fluid wrapper height depending on floated elementCSS：流体包装高度取决于浮动元素
【发布时间】：2011-12-25 06:13:53
【问题描述】：

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

这是一个示例代码： http://tinkerbin.com/c0wqtfSa

包装应该根据浮动图像采用自动高度，但是如何？ :/

非常感谢！！！

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

【问题讨论】：

标签： html css height css-float

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

你需要的css是：

.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 类添加到您的“包装”div 中

【讨论】：

【解决方案3】：

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

overflow:hidden

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

尝试添加

Overflow: auto;

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

【讨论】：

它看起来像解决方案！在我的 Chrome 上运行良好。交叉浏览有什么问题吗？我需要找一台windows机器来测试：|
如果您要使用溢出：自动...请务必查看这篇文章，了解其中的一些缺陷以及如何解决它们。 webdesignerwall.com/tutorials/css-clearing-floats-with-overflow

【解决方案6】：

在您的

之后添加<div style="clear:both"></div>

浮动元素后需要清除...

所以：

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

【讨论】：