html - 为什么 "height: auto;"在我使用 "float:left"时不起作用？

Question

我有三个响应列，我想为这些 div 添加一个包装 div。

我已经创建了这个 wrap div，但它只适用于像素值，我不想使用像素，因为我正在尝试构建响应式布局，如果我可以使用百分比或自动，那就太好了。

示例:如果我输入高度:300 像素，它可以工作，但如果我使用高度:自动；或高度:30%；它不起作用。

我知道它不起作用，因为我使用的是左浮动。

为什么会这样？还有其他方法吗？

CSS

#offerinformations {
    width: 290px;
    float: left;
    padding: 5px 15px;
}

#offerlogo {
    width: 294px;
    float: left;
    padding: 5px 15px;
    margin: 0px 5px 5px 5px;
}

#offerbtns {
    width: 270px;
    padding: 5px 15px;
    float: left;
}

#offers{
color:white;
background-color: #262627;
border-left: 5px solid #f15c5c;
height: auto;
}

HTML

<div id="offers">
<div id="offerinformations">
        <h2>Informations</h2>
        <p>This page demonstrates a 3 column responsive layout.</p>
    </div>

    <div id="offerlogo">
        <h2>Logo</h2>
        <p>This page demonstrates a 3 column responsive layout.</p>
    </div>

    <div id="offerbtns">
        <h2>Buttons</h2>
        <p>This page demonstrates a 3 column responsive layout.</p>
  </div>
  </div>

Answer 1

你需要在你的 div 结束前添加一个 clearer ..

它是一个具有适当 CSS clear:both;

的元素 (span, div, p)

Explanation