Menu
So, I have taken to reading the CSS specification to better understand how to use style properties and attributes in my code. Currently on Box model- Collapsing Margins, http://www.w3.org/TR/CSS2/box.html#collapsing-margin , and I came across this line in the spec.
If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block
Anyone care to explain what the above really means please? Also shine more light on clearance as used above please. would definitely appreciate your input here.
452
To clear a float, add the clear property to the element that needs to clear the float. This is usually the element after the floated element. The clear property can take the values of left , right , and both . Usually you'll want to use both.
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).
Clearing floats The CSS clear controls the behavior of the floating element by preventing the overlapping of consecutive elements over the floating element. The value of the property clear specifies the side on which the floating element is not supposed to float.
Maybe look at it like this.
Suppose you have a left floated element. Lets call it block F. That block is taken out of the flow by the float, so the next block element (assume that it's not floated, and call that block B) starts at exactly the same place horizontally and vertically as block F. When text is placed in block B, it starts to fill up block B, but the text won't overlap with block F. That's what floats do.
Suppose too that there is a another block element, also not floated and call that block C. (This is going to be our important one). Block C will be placed immediately below block B. This, depending on the relative heights of blocks F and B might start above the bottom of Block F or below it.
-- Stop here and make sure you've got the two possible pictures of the three blocks F, B, C clear in your mind --
Now, suppose we apply clear:left to block C. If block C starts below the bottom of block F then the clear:left has no effect and there is no clearance.
If block C starts above the bottom of block F, then block C is moved down until its start is no longer above the bottom of block F. The distance it is moved is called the clearance.
[The description above is a bit glossed over. Is the "start" of a block the inner or outer edge of the margin box, border box, padding box, or content box? Similarly for "top" and "bottom". We don't need to worry about this here, but the CSS spec nails it all down.]
Once clearance or not has been established, then the behaviour of what can happen with margin collapsing can be applied mechanically.
So, to answer your comment questions, clearance can only happen when a clear property other than "none" is applied, but that's not sufficient, the block must actually be moved down. Thus the quoted margin collapsing rule only applies to block C if block C is actually moved down by the clear:left rule.
Finally, note that for historical reasons, there are situations where a clear rule can be applied indirectly via an HTML attribute, rather than directly in CSS.
142
I'm not sure if this was a test, but the exact instance of the word “clearance” that you quoted was actually linked to the description/definition for the purposes of that very spec:
http://www.w3.org/TR/CSS2/visuren.html#clearance
Values other than 'none' potentially introduce clearance. Clearance inhibits margin collapsing and acts as spacing above the margin-top of an element. It is used to push the element vertically past the float.
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
