如何根据徽标的高度使高度自动包装器扩展

Question

我遇到了一个问题，我想让包装的高度根据徽标的高度展开。我知道 Google 中有很多这样的问题，但实际上没有一个对我有用。

我已经尝试了 height: auto !important 方法。

我也尝试过 min-height，它在大多数情况下都有效，但是当我将高度设置为 auto 时，它对我不起作用。

这是我的 CSS：

.header {  
width: 100%; 
height: auto;
min-height: 80px; 
position: relative;
background: red; }

.logo { float: left; border: 0; }

HTML：

<div class="header">
  <img src="logo.png" class="logo"/>
  <br class="clear" />
</div>

请注意，我也尝试过不使用浮点数。如果这个问题很容易解决，我提前道歉。我做了我的研究，但没有一个对我有用，或者我发现的任何人都处于我的境地。我会很感激一些帮助。谢谢！

Answer 1

由于你的 logo 是 float:left，你需要使用所谓的 clearfix，所有使用 hight 或 min-height 的操作都是错误的方式。 clearfix 有很多种。既然你有<br class="clear" />，你只需要在你的样式表中添加.clear { clear: both; }，但这不是最好的方法。这是更好的一个：

CSS：

.header {  
    width: 100%; 
    background: red; 
}

.logo { 
    float: left;
}

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

http://www.webtoolkit.info/css-clearfix.html

HTML：

<div class="header clearfix">
  <img src="logo.png" class="logo" />
</div>

您可以在此处查看工作示例：http://jsfiddle.net/ZCXVr/1/ 附言给标题overflow: hidden也是一种方法，但我不推荐使用它

Answer 2

尝试给出标题overflow: hidden