Child elements use the float parent element to open the method

A div contains a number of sub-div, and the child Div uses a floating, the parent Div can not be open, such as:

Some of the code is as follows:

1 <style>
2 #div1 {border:1px solid red;float:left;}
3 #div2, #div3 {float:right;border:1px solid blue;}
4 </style>
5
6 <div id= "Div1" >
7 <div id= "Div2" >two</div>
8 <div id= "Div3" >one</div>
9 </div>

If you want to open the parent element, you can use the following methods:

Method One:

The parent element is set overflow and zoom with the following styles:

1 <style>
2 #div1 {border:1px solid red;overflow:hidden;zoom:1;}
3 #div2, #div3 {float:right;border:1px solid blue;}
4 </style>

Method Two:

The parent element is also a floating effect, styled as follows:

1 <style>
2 #div1 {border:1px solid red;float:left;}
3 #div2, #div3 {float:right;border:1px solid blue;}
4 </style>

One drawback of this approach is that the width of the parent element needs to be set.

Method Three:

Add a child element and set the clear style:

1 <div id= "Div1" >
2 <div id= "Div2" >two</div>
3 <div id= "Div3" >one</div>
4 <div style= "Clear:both" ></div>
5 </div>

This method adds a DIV element, which in some cases may affect the traversal of the element.

The above method uses DOCTYPE HTML 4.0 and DOCTYPE XHTML 1.0 Transitional to test through the FF IE6 IE7 IE8, and no other browsers are tested.

Child elements use the float parent element to open the method