这个HTML代码有什么问题？

Question

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

Here is the problem. Random_class goes to the top, on the text1 and text2. What is wrong? Thank you.

Answer 1

You need to clear the floats, below is an example of it.

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

You could also do

.random_class {
    clear: both
}

Answer 2

Here you go:

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

Added clear:both; to .random_class

Answer 3

Whenever you float an element it takes it out of content flow.

Text1 and Text2 are floated so Text3 acts like it doesn't see it there. Floats are aware of other floats. Using clear:both; tells CSS that nothing should be to the left or right of it.