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
Related
Why do we say that the display property of floated elements may change to block level, instead of saying inline-block, because it starts taking the space according to the content it wraps?
inline-block means inline level, block container.
inline-level elements participate in the layout of a line (or multiple lines). This affects line spacing and the vertical alignment of other elements in the same line.
Floated elements do none of that. The participate in block formatting contexts, not inline formatting contexts.
That is the purpose of float. found some information in here
The float CSS property specifies that an element should be placed along 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 web page, though still remaining a part of the flow (in contrast to absolute positioning).
Also
when an element is floated, it is taken out of the normal flow of the document (though still remaining part of it). It is shifted to the left, or right, until it touches the edge of its containing box, or another floated element.
I am finally starting to understand floats in CSS but I am stuck on one part.
I understand floating an element takes it out of the flow of the document so elements after it would render 'underneath' it as it is not visible to them.
However I am having difficulty understanding why inline elements are aware of the float and flow around it if it has been taken out of the document flow?
Why inline elements flow around float?
From MDN:
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.
float origins:
The practice of flowing text around an image goes back a long, long time. That's why the ability was added to the Web starting with Netscape 1.1, and why CSS makes it possible using the property float.
Complex Spiral Consulting
So float was designed to solve this particular problem:
Consider This figure:
And the markup structure that produced it:
<p>
...text...
<img src="jul31-03-sm.jpg" height="200" border="0" class="picture">
...text...
</p>
<p>
...text...
</p>
The floated image is sticking out of its containing element. We can see this more clearly by adding borders to the paragraphs:
Using float makes it possible for the paragraphs to ignore the image, while the text wrap around it.
There are rules governing the relationship between floated elements, block elements and line boxes.
These rules are defined in the CSS Visual Formatting Model.
In particular, note this section from the specification:
The IMG box is floated to the left. The content that follows is formatted to the right of the float, starting on the same line as the float. The line boxes to the right of the float are shortened due to the float's presence, but resume their "normal" width (that of the containing block established by the P element) after the float.
In other words, block boxes, such as a p, will flow behind the floated element. But the line boxes in the p, which wrap the text, respect the presence of the floated element. These are just the rules, as defined in the spec.
Float element is designed so that it always floats to left or right side of the parent element. But it doesn't cover the content part. Content part always follows float element (Like you said).
Basically, there is a quite small difference between display:block and display:inline.
display:block represents block or lets say container which wraps a complete parent div horizontally and has margin and padding properties.So, it may behave as a parent container, and so float covers its part.
display:inline subjects to content not a container. It dosen't have a padding or margin properties so it is considered to be a part of a content. That's why it follows float element. Even if you add some content in display:block element, there you will see that content is following float element.
Is overflow:hidden to fit a width a hack? We have a responsive website that uses overflow:hidden in conjunction with width:100% to set the layout properly. However, any new feature that we add has issues.
For example, we implemented a custom html drop down. The drop down is partially hidden when expanded outside the container.
Is there a proper way to get this to work without having to redo the styles for the entire page?
The behavior I'm trying to describe is used in #4 in this article
http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design/comment-page-2
The purpose of overflow:hidden is not to clear floats per se, but to control child content containment by establishing a new block formatting context(BFC) flow root, one feature of BFCs is float containment.
More on BFCs from MDN
A block formatting context is a part of a visual CSS rendering of a
Web page. It is the region in which the layout of block boxes occurs
and in which floats interact with each other.
A block formatting context contains everything inside of the element
creating it that is not also inside a descendant element that creates
a new block formatting context.
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.
Technically the way to clear floats is to use clear, this will also mean you dont have to rely on using overflow:hidden thereby removing your menu cropping issue.
You can, for example, have an element after your floated elements with clear set on it - another alternative would be to use a clearfix (also, here). A clearfix uses a psuedo element to apply the relevant clear.
More on clear from MDN
The clear CSS property specifies whether an element can be next to
floating elements that precede it or must be moved down (cleared)
below them.
[...]
The floats that are relevant to be cleared are the
earlier floats within the same block formatting context.
The answer to this question is "wrap the input in a span, and apply overflow: hidden to the span."
This works because it establishes a new block formatting context for the span, making room for the floats.
Why does applying overflow: hidden directly to the input not work? Why is it necessary to wrap the input in a span?
The behavior of block formatting contexts next to floats is not fully specified. From CSS2.1 (emphasis added):
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3. CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower.
So the (unsatisfying) answer is effectively "that's just how browsers behave". This means that layouts that rely on the "shrink to fit" behavior -- the effect produced by wrapping the input in a span, in the question's example -- are relying on unspecified browser behavior. From the point of view of the spec, browsers could just as well always clear the block formatting context below the float.
It appears there's been some activity to better specify this corner of CSS for CSS3, but I haven't found anything authoritative.
Overflow: hidden applies to the container element, instructing the browser how to manage content that extends beyond the defined limits of the container's borders. By adding overflow: hidden directly to the input you're not really adding anything since the input doesn't have any child elements to affect the positioning or proportions.
Setting overflow doesn't clear the float at the element, it self-clears. This means that the element with overflow applied (auto or hidden), will extend as large as it needs to encompass child elements inside that are floated (instead of collapsing), assuming that the height isn't declared.
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