The use of floating in CSS and the method of clearing floats

1. What happens when you use a float:

(1) make block elements appear on one line

(2) enable inline elements to support wide height

(3) when the width is not set wide, the content is Open.

(4) line breaks are not parsed (so the method of clearing gaps when using inline elements can use Float)

(5) the element adds a float that moves away from the document stream, moving in a specified direction until it touches the parent's border or another floating element stops (the document flow is where the realistic objects in the document occupy the Arrangement)

2. How to clear floating:

(1) Add a float to the parent element (in this case, the parent element margin:0 Auto; it cannot be centered)

(2) Add display to the parent element :inline-block; (the Previous method is not centered, only IE6,7 Center)

(3) add <div class= "clear" ></div>. clear{height:0px;font-size:0;clear:both under the floating element ; , but in IE6 , the block element has a minimum height, that is, when height<19px , the default is 19px , Workaround: font-size:0; or overflow:hidden;

(4) add <br clear= "all" under floating elements >

(5) Add {zoom:1} to the parent element

. clear{zoom:1}

. clear:after{content: "";d isplay:block;clear:both;}

(6) Adding Overflow:auto to the floating element parent ;

eg: CSS 's zoom property: theZoom property is The proprietary property of IE browser, Firefox and other browsers are not Supported. It can set or retrieve the scale of an object. In addition, it has other small functions, such as triggering IE 's haslayout property, Clearing the float, clearing the margin overlap and so on.

The use of floating in CSS and the method of clearing floats