Today, I read the graphic CSS section. Although I mainly talk about the use of the nth-of-type selector, I have noticed the page layout method as follows:
Html
<body><div class="article"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div></body>
CSS
<style type="text/css">.article {width: 500px;margin: 20px auto;}.article img:nth-of-type(odd){float: left;margin-right: 10px;}.article img:nth-of-type(even){float: right;margin-left: 10px;}</style>
Effect:
Then, I was puzzled because the IMG itself is a row element. After float is added, it becomes an inline-block element, which has both the "temperament" of block elements and intra-row elements ", but the P element that follows it is a real block element. When the IMG floats, the P element is moved away from the standard document stream, part of the text based on experience overlaps with the IMG (the elements after float are all floating on the Document Stream), and pay equal attention to it (but there is no overlap ). Using fixfirebug in Firefox, I found that after the IMG float, the P element actually moved up (rather than right floating), and it can be seen from the blue border that the P element occupies the entire box, for example: I was puzzled, so I read the article by Zhang xinxu, a great God. One of them said, "the destructive force of floating is to cut down the line box chain and cause the height to collapse, however, because the floating element is still in the DOM tree, the object is visible and tangible, so the position of the object is still in." Therefore, the conclusion is (referencing the reply below): "The elements are removed from the document stream, that is, the elements are removed from the general layout. When other boxes are located, it is located as an element that does not exist in the Document Stream. It should be noted that when float is used to exit the Document Stream, other boxes will ignore this element, but the text in other boxes will still give way to this element and surround it. For elements that use absolute positioning to exit the Document Stream, other boxes and text in other boxes will ignore it ." In this case, the content in the box is also very important!
Why floating can enable text wrapping without Overlap
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
