Understanding of the Clear property in CSS

Today in the blog Park page layout found that there are a lot of blank div only CSS properties: Clear:both.

And then go to the document and Baidu brain a bit, summarized as follows:

This is a test code I wrote before:

<Divstyle= "Height:auto;">        <DivID= "Map"></Div>        <Divstyle= "float:left;width:50%">            <DivID= "SearchResult">&nbsp;</Div>        </Div>    </Div>    <DivID= "Lonlatdiv">Lon and Lat is:<spanID= "text"></span></Div>

One of the map's div is float for left, I expect the effect is map div and SearchResult div in a row, while lonlatdiv in the next line, the result is unexpectedly early summer as follows:

Lonlatdiv actually with the above div to a line, this is certainly not the result I want,

Solution (2 option 1) is:

<Divstyle= "Height:auto;">        <DivID= "Map"></Div>        <Divstyle= "float:left;width:50%">            <DivID= "SearchResult">&nbsp;</Div>        </Div>        <Divstyle= "Clear:both;"></Div> <!--add a blank div here. -    </Div>    <!--Lonlatdiv's style adds Clear:both; -    <DivID= "Lonlatdiv">Lon and Lat is:<spanID= "text"></span></Div>

The clear values are:

/**/  clear:right; /* indicates that there is no floating element  to the right of the element */ Clear:both;   /* indicates that no floating element  exists on either side of the element */ Clear:none   /* indicates that floating elements  are allowed on both sides */