html - 奇怪的 DIV 行为(在 Chrome、IE、FF 中)

Question

问题

我有以下标记:

    <div id="progress-bar">
        <div id="step-1" class="active"><p>1. Select Room</p></div>
        <div id="step-2" class="incomplete"><p>2. Choose Date</p></div>
        <div id="step-3" class="incomplete"><p>3. Confirm Order</p></div>
        <div id="step-4" class="incomplete"><p>4. Make Payment</p></div>
    </div>

它的边界意味着包围所有的“台阶”，而是将它们切成两半，我发现解决的唯一方法是明确设置它的高度，虽然我认为里面的内容会这样做不设置高度时。

根据 Chrome 的 Inspect Element，这些是应用于它的所有 CSS 规则:

进度条:

div#progress-bar {
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid black;
}

单个步骤仅具有字体样式(文本阴影、字体大小)以及(其中 step-x 对应于 step-1、step-2 等)的标记:

div#step-x {
    padding: 10px;
    width: 227.5px;
    float: left;
}

我确实使用了 CSS 重置，尽管我认为这些背后的想法是删除所有样式，所以这会成为问题吗？

欢迎任何指向此特定问题的其他地方的链接(进一步阅读，如果它是已知错误，也许是解决方法)。

Answer 1

尝试为 #progress-bar 添加 overflow:auto 以清除 float 。信息http://www.quirksmode.org/css/clearing.html