Could you please explain this rule of floating elements when combined with inline elements?
"The outer top of an element's floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document".
If you could give me a simple example that would be great, actually my more specific question is that, does the statement apply when the inline elements are siblings of the floated elements?
I also know that all elements when inline become block level when floating, but that's not my question.
The question seems too technical for me to understand.
Related
Check this JSFiddle:
<IMG src="https://www.google.com.hk/images/srpr/logo11w.png" alt="This image will illustrate floats">
<span>The contents of floats are </span>
The image is floated, and the span has clear:both. However, if the span has display value inline or inline-block, the clearance is not created. Only if it is block, the clearance is created.
I checked the Spec, it says:
both: Requires that the top border edge of the box be below the bottom
outer edge of any right-floating and left-floating boxes that resulted
from elements earlier in the source document.
It doesn't mention how the display affects the creation of the clearance. Could anybody help to explain?
It's simple: clear only applies to block-level elements.
'clear'
Applies to: block-level elements
Block-level elements are defined as
Block-level elements are those elements of the source document that
are formatted visually as blocks (e.g., paragraphs). The following
values of the display property make an element block-level: block,
list-item, and table.
This question already has answers here:
Why can you clear floating elements but not absolutely positioned elements?
(2 answers)
Closed 6 years ago.
Both floated and absolutely positioned elements are taken out of the document flow. Then why does clearfix hack only work on floating elements not upon absolutely positioned elements?
There is a common misconception that floats are removed permanently from the document flow.
This is not the case, floated element are removed from their standard position in the flow and shifted as far as possible to the left or to the right on their current line, depending on the specified floating direction.
W3 Spec
A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the 'clear' property). Content flows down the right side of a left-floated box and down the left side of a right-floated box.
A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there is a line box, the outer top of the floated box is aligned with the top of the current line box.
Floated elements affect the elements around them, absolutely positioned elements do not.
W3 Spec on Absolute Positioning
In the absolute positioning model, a box is explicitly offset with respect to its containing block. It is removed from the normal flow entirely (it has no impact on later siblings).
Notice the difference?
So a clearfix (or clearance) only affects floated elements. A clearfix is not used to clear floating elements, it's used to contain floating elements inside another element.
There's a great article on CSS-Tricks which explains All About Floats and covers the differences between them and positioning.
FLOAT :
When you float an element, The element is not taken out.
Float does not removes an element from the document’s flow.
Position ABSOLUTE :
When you position an element the element is take out (Placed above other elements).
Absolute positioning removes an element from the document’s flow. The element given absolute positioning will no longer affect the layout of other elements in the document.
This is the best example you can understand easily : Check this
In what all cases does a floated element push other elements and/or text out of the way?
For example, can floats ever push a "cousin" element around (or any other text/element that requires traversing up the DOM)?
My understanding is that floated elements will overlap only adjacent elements (and their contents) but will then push text and inline/inline-block elements out of the way so no overlap occurs. I've had a few times where float behavior has surprised me in the past so I'd like to verify what I thought I knew.
Directly from the MDN.
Block formatting contexts are important for the positioning (see float) and clearing (see clear) of floats. The rules for positioning and clearing of floats apply only to things within the same block formatting context. Floats do not affect the layout of things in other block formatting contexts, and clear only clears past floats in the same block formatting context.
Block formatting context
Could I get a few concrete examples of how these two differ? It seems that replaced inline elements have properties like width, height, margin etc that non-replaced inline elements don't have (thus making the difference between block elements and replaced inline elements harder to explain) and vice versa, inline-blocks have some of the delicate features that inline elements have as well...
They sorta meet in the middle it seems coming from two different ends...
Maybe this fiddle will give you a better insight in inline, inline-block and block
http://jsfiddle.net/4h9JS/
The biggest difference is that inline-block is still an inline element, but behaves as a block element
Here's my doubt. If I float an inline element, since it's display is automatically set to block, and since siblings of block level elements have to be themselves block level elements(anonymous ones if they must), shouldn't in the example below, the first and second anonymous blocks be placed on separate lines as block level elements do by default?
<p>
This will be the first anonymous block, <span style="float: left;">this will
be the span</span>, and this will be the second anonymous block.
</p>
See my demo: http://tinkerbin.com/5niDbThT
Notice that when I directly set the display to block on the span of the second paragraph, three different block level elements are created - just as I imagined it would happen when floating.
My guess is that floating is simply an exception that doesn't trigger the effect. But you tell me ;). Thanks in advance!
Floats take the object out of the document flow which is why it shows up as it does.
Inline-block: "The element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element"
You can also "clear" dom elements which pushes the element past the floated object. Most commonly used in a layout with a main area and a right/left column side by side.
So I thought about your question and the implications for a while and this is the conclusion I've come to:
So according to the W3 CSS spec, http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#floats, "Content flows down the right side of a left-floated box and down the left side of a right-floated box." So what the first example span in your tinkerbin is doing is perfectly normal; it's what is supposed to happen when a floated element comes in contact with any content. Actually in your tinkerbin you didn't set the span with display:block as float:left, so it just created a scenario where the other elements have to be treated as block-level, as you mentioned.
If you do apply float:left to span-2, you get the same result as span-1.
I edited your tinkerbin and put in a div structure: http://tinkerbin.com/NoOqLU4O which uncovers additional weirdness. It seems to treat text before the div as a block but text after it as content. Who knows?
Bottom line I think that you're right, floating is an exception that doesn't trigger the effect because it's hard to put a finger on what exactly is "content that should wrap to the float" when your float itself is content..