html - 使浮动元素“存在”

Question

在我的网站上，我有这样的东西：http: //jsfiddle.net/YRBT4/

现在，#second块是一个动态对象——服务器要么生成它，要么不生成。如果它不在那里，那么#fourth块就会崩溃，一切看起来都很糟糕。

如何使#third块的行为与#second一个块一样，但将其保留在包含元素的右侧（我不想在此处指定任何固定值）？

Answer 1

添加 clear:right 到#forth 应该可以解决问题。

#fourth{
    width: 100%;
    height: 50px;
    border: 1px solid black;
    clear:right;
}

Answer 2

我会使用clearfix：

<div id="first"></div>
<div class="clearfix">
    <div id="second"></div>
    <div id="third"></div>
</div>
<div id="fourth"></div>

和：

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

请注意，这.clearfix是可重复使用的，并且是清除浮动元素的常见做法