|
|
Posted by Jonathan N. Little on 06/14/06 16:11
fred.haab@gmail.com wrote:
> Jonathan N. Little wrote:
>> NO it indeed does shoe a parent/child relationship, The diagram shows to
>> adjacent blocks with red borders, but the upper on had a floated
>> *child* image. The diagram illustrates how the floated *child* image not
>> only breaks out of its containing block but also extending into the
>> block adjacent to its *parent*. This is made visible because the floated
>> image obscures the border and margins of the two blocks with normal flow.
I will agree that the spec is hardly an easy read, nor are the author's
expansive in their samples and illustrations, but in both the sample
code and diagrams they are showing the floated image as a child of a
block in normal flow. Their example:
<BODY>
<P>Some sample text <=[1]
<IMG src=img.png alt="This image will illustrate floats"> <=[2]
that has no other... <=[3]
Notes:
[1] They started the parent block with content here
[2] The child floated block, this case an image
[3] More of the parent block's normal flow content
Then in the first of the 2 diagrams they show the parent block with a
red border. It has content "Some sample text..." that precedes the
floated image, show in grey with an 'x'. The rest of the parent
paragraph's content flows around the floated image as it should. The
floated image extends beyond the bottom border and margin of the parent,
as it should, and does *not* expand the parent. This is the issue with
your own floated child that you were complaining about, right? In
addition the diagram shows how the the floated child of the 1st
paragraph injects into the one below! As it should.
Next is shows what happens when you add clear property to the parent
blocks. Notice in the 2nd diagram that the clear property on the P
elements prevents the image from injecting into the second paragraph's
content area, it does not cross over the red border (It does enter the
2nd P's margin space the space is the floated block's margin that does
not collapse) But the important thing to note here is that floated image
still *does* break out of its parent paragraph in the diagram, it
crosses the red border. the 1st P does not expand.
>
> Again, I'm not saying you're wrong about your interpretation of what
> the page says, but the page does NOT show the markup for the image it's
> displaying in those two diagrams (one with a clear, one without). The
> small bit of markup it shows above is not complete. I can infer you
> are right from the point by point they have a bit lower on the page -
> they are quite clear about what happens left, right, and top - but they
> don't mention bottom in any meaningful context.
>
> The text also says "Here is another illustration, showing what happens
> when a float overlaps borders of elements in the normal flow." It's
> showing that the inline element (the P) overlaps the floated element
> even though the text itself doesn't. It doesn't say, or imply, that
> this is a parent/child relationship.
Yes it does, as I said above it shows content text within the first
paragraph above the floated image. The grey rectangle's top is within
the content area (within the red border) of the parent. And it shows it
breaking out of the paragraph's bottom border.
>
> There is nothing to indicate that what it's displaying has any
> relevence at all to the complete markup they show in the other example
> above - they show NO markup for those two images.
>
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Navigation:
[Reply to this message]
|