Floating some points of knowledge

One, floating definition: will be forced to change the display for Inline-block, so that the element queue column, (arrangement by the property value, LEFT/RIHGT), so that the element is semi-detached document state

Second, floating elements in the semi-floating state, can see the floating elements of the main text and have inline attributes of the elements, so this raises a problem, and an application

(1) One problem: parent container cannot see child floating elements

Workaround:

Method one: Departure CSS hack, change the rendering rules, the common method is as follows:

Overflow:hidden;

Position:absolute;

Display:inline-block;

Method Two (most standard method): After pseudo-element clears the float (note: ie6,7 is not compatible with pseudo-element processing, *IE6, 7 can identify, _ only IE6 can be identified)

　　　　　　　　　　　　

<div class= "wrapper" >        <div class= "content" ></div>        <div class= "content" ></div >        <div class= "content" ></div>    </div>

. wrapper {    width:1000px;    Background-color:pink;    *zoom:1; /* Resolve IE6, 7 incompatible pseudo-element issues */}.content {    float:left;    width:200px;    height:200px;    Background-color:orange;}

(2) An application: Achieve the text wrapping effect of the picture

The normal text is aligned with the bottom of the picture, and by setting the picture float allows the text to be aligned from the top of the picture, enabling text to surround the image, like a newspaper layout

img {    float:left;/* or right*/          }

　　　　

Floating some points of knowledge