Learn the blues of CSS-chicken first or egg

Original link: http://www.cnblogs.com/Dtscal/archive/2011/08/28/2155947.html

That's what it was supposed to be.

Personally think: The theoretical code should be the first insert text inside the div and then insert the IMG, and finally set the alignment of the IMG. The approximate effect should be able to come out.

<div id= "Top-photo" > High-end gifts in the company to buy wedding supplies thousands of dollars can be awarded a high-end album " </div>

CSS Code

#top-photo img{ Float:right; }

It's a pity that, after all, it's my theory, and the result of that theory is that.

Make their own rather depressed, compared with the source code no difference, no difference = There is a difference: img and the text of the order reversed. Why does it come to this end? Reference to the blue ideal of theCSS document flow with block-level elements and inline elements finally understand the browser's document flow inline elements, block-level elements. The text is in front, and no float is set. will be arranged from top to bottom row by line. Then the IMG, and if you don't set the IMG float, it will be on the left. Because CSS is left-aligned by default, the picture will only be below the text, whether the picture is left or right. Then why the IMG and the text will be reversed to achieve it. The key is also in document flow and float. In the words of the blue ideal: each non-floating block-level element has a single row, and the floating element floats at one end of the row. If the current line does not fit, a new row is floated again.

Because the IMG is set to float, it floats to the right. And the text is not set to float. So when the text encounters IMG will automatically rearrange!

Oh, so there are chickens and eggs! ^#^

(turn) Learn the blues of CSS-chicken first or egg