Method 1: Use an empty element with the clear attribute

Float the element with an empty element such as

<div class="clear"></div>
Copy the code

And in the CSS

.clear{clear:both; }Copy the code

Property to clean up the float. Also can use

<br class="clear" />
Copy the code

or

<hr class="clear" />
Copy the code

To clean up.

 

Method 2: Use the OVERFLOW property of CSS

Add to the container of floating elements

overflow:hidden
Copy the code

or

overflow:auto;
Copy the code

You can clear floats, and in IE6 you also need to trigger hasLayout, such as setting the container width or zoom:1 for the parent element.

After the overflow property is added, the float element goes back to the container layer and pushes up the container height to clean up the float.

 

Method 3: Add a float to the container of floating elements

Adding a float attribute to the container of a float element clears internal floats, but this will make it float as a whole, affecting the layout and is not recommended.

 

Method four: make