这个HTML代码有什么问题？

Question

<div style="float: left">text1</div> 
<div style="float: right;">text2</div>
<div class="random_class">text3</div>

这是问题所在。 Random_class在text1和text2上位于顶部。怎么了？谢谢。

Answer 1

你需要清除花车，下面就是一个例子。

<div class="random_class" style="clear:both">text3</div>

您也可以

.random_class {
    clear: both
}

Answer 2

你走了：

http://jsfiddle.net/q4CqZ/3/

将clear:both;添加到.random_class

Answer 3

无论何时浮动元素，它都会将其从内容流中移除。

Text1和Text2是浮动的，因此Text3就像它在那里看不到它一样。浮子知道其他浮子。使用clear:both;告诉CSS，它的左侧或右侧不应该有任何内容。