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"> </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"> </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 */