Div set float float after the next div to wrap the method

"Div style=" float:left; "1111111"/div "

"Div style=" float:left; "222222"/div "

"Div" 33333333 "/div"

1111111 and 222222 are on the same line, and the next 33333333 will be on the same line, although there is no float:left attribute.

To make 33333333 not the same line what to do, the answer is simple is to join Clear:both;

"Div style=" clear:both; "33333333"/div "

This will solve the div line-wrapping problem. Wrap the div after the same row is set. Likewise, if the div is later a table, it is also possible. The following code:

<div style= "Float:left;" > 1111111 </div>
<div style= "Float:left;" >222222 </div>
<table style= "Clear:both" >
<tr><td>tttttt</td></tr>
</table>

If the div is followed by a text box or a button,

<div style= "Float:left;" > Page Content </div><input type=text value= text box/>

<div style= "Float:left;" > Page Content </div><button> submissions </button>

You cannot use style= "Clear:both" on a text box or button, so you can use the following method:

① behind the div is a <br/> for line breaks, such as: <div style= "float:left;" > Page Content </div><br/><input type=text value= text box/>

② add an empty div behind the floating div and set the clear style properties, such as: <div style= "float:left;" > Page Content </div><div style= "Clear:both" ></div><button> submit </button>

This will solve the problem of floating div wrapping.

Reference Source:

Http://blog.sina.com.cn/s/blog_6721f25c0101i1tk.html

Http://www.jb51.net/css/221269.html

Div set float float after the next div to wrap the method