奇怪的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对应于步骤1，步骤2等）：

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

我确实使用了CSS重置，虽然我认为这背后的想法是删除所有样式，所以这可能是一个问题吗？

欢迎在其他地方找到这个特定问题的任何链接（进一步阅读，如果这是一个已知的错误，也许是解决方法）。

Answer 1

使用overflow: visible。

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

浮动内容会对包装元素执行一些非直观的操作。

Answer 2

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