Clear Method Learning and analysis (clear a few simple uses of float)

Self-commonly used to clear floating methods to analyze

After setting the float property, it will be an element that would otherwise occupy a row, and can be lined up in a row. Set the Float property to the left or right, so that the floating box moves left or right until its outer edge touches the bounding rectangle of the containing box or another floating box. Because of this, when you set up float , there are a lot of unwanted effects, such as the parent element height does not exist, the layout is chaotic, so you need to resolve this situation.

I usually use the two methods:

(1)clear attribute analysis:

Add extra Tags <div style="clear:both"></div> in the set floating article:

The clear property value is defined in the book :theclear property specifies that the left or right side of the paragraph does not allow floating elements. The specific property values are as follows:

650) this.width=650; "Src=" http://s5.51cto.com/wyfs02/M01/7C/79/ Wkiom1brgwmbj7xyaabc2v_ukag282.jpg "title=" 1.1.jpg "alt=" wkiom1brgwmbj7xyaabc2v_ukag282.jpg "/>

div block, including three sibling elements, one element, a <P> element, a div element, in order to look easy, put css and html mixed together, (so bad)

650) this.width=650; "src=" http://s1.51cto.com/wyfs02/M00/7C/7A/wKiom1bRH0PhpQbLAAChYRBJ0AM851.jpg "title=" 0.1. JPG "alt=" wkiom1brh0phpqblaachyrbj0am851.jpg "/>

The interface effect at this point is:

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M01/7C/78/wKioL1bRG7WC-dxgAAGqrbgNhq4435.jpg "title=" 1.3. JPG "alt=" wkiol1brg7wc-dxgaagqrbgnhq4435.jpg "/>

But the <div in the code above style= "clear:left;" ></div>, uncomment, you can eliminate The effects due to the left float of the IMG element, as follows:

650) this.width=650; "src=" http://s2.51cto.com/wyfs02/M00/7C/79/wKiom1bRG2qTjuFiAAB2yZQD1OA202.jpg "title=" 1.4. JPG "alt=" wkiom1brg2qtjufiaab2yzqd1oa202.jpg "/>

then continue with the <div in the code above style= " Clear:right; "></div>, get such as:

650) this.width=650; "Src=" http://s4.51cto.com/wyfs02/M00/7C/79/wKiom1bRHGGRmzndAAFb1CZ_UaI465.jpg " Title= "1.5.jpg" alt= "Wkiom1brhggrmzndaafb1cz_uai465.jpg"/>

then continue with the <div in the code above style= " Clear:both; "></div>, get such as:

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M01/7C/79/wKiom1bRHD2Ceui6AAGuX8AUKNw564.jpg "title=" 1.4. JPG "alt=" wkiom1brhd2ceui6aagux8auknw564.jpg "/>

If you look at the above, you should understand how the clear property should be used, and how it will prop up the height of the parent element.

(2) to add a parent element to a parent element set overflow:hiddeninstead of using the clear property, the effect is as follows:

650) this.width=650; "src=" http://s1.51cto.com/wyfs02/M00/7C/78/wKioL1bRHOzQULd5AABbKkoNd9o064.jpg "title=" 1.6. JPG "alt=" wkiol1brhozquld5aabbkkond9o064.jpg "/>

Only the effect of the parent element being stretched is achieved, but the problem of moving the back element up due to a float is not resolved.

This depends on the actual effect of the results to achieve.

Here, just the two ways to clear float , a summary of their own learning, detailed needs to see can http://www.cnblogs.com/mofish/archive/2012/05/14/   2499400.html, in this link, see more in-depth explanation.

Clear Method Learning and analysis (clear a few simple uses of float)