包裹扩展容器

Question

我在CSS中有一个可扩展的容器。折叠时看起来像。（下图）

• 第一
• 第二
• 第三

如果我展开第一项，则会发生这种情况（下方）

• 第一个+第二个     +第三

浮动左边看起来像是导致问题，但没有它格式化是关闭。如何在展开后将其他所有东西包裹起来。

div.wrapper{
    float:left;
    position:relative;
    margin: 30px 30px 30px 30px;
}

Answer 1

div.wrapper{
    display:inline-block;
    position:relative;
    margin: 30px 30px 30px 30px;
}

Answer 2

你必须'清除'你的流量。

.wrapper {
    float:left;
    clear:both;
    position:relative;
    margin: 30px 30px 30px 30px;
}

无需更改显示属性，也不需要使其表现得像“阻止”一样。

Fiddled here我在那里添加了一个仅用于视觉的边框。

Answer 3

在.wrapper的结束div标签之后，放入一个明确的div：

// html code
// wrapper contents
</div>
<div style="clear: both"></div>