What are the CSS properties that get elements out of the normal flow?

Question

What are the CSS properties that get elements out of the normal flow? Such properties would be float, position:absolute etc.

This question relates to all the possible alterations of the normal flow.

Sechrist

display is another one. Can I ask what the underlying problem is? It is possible that there are other attributes which don't nominally alter the flow, but in certain cases they do, like oversized margins. – Hillery

Define 'normal flow'? @biziclop, display doesn't take documents out of the flow, it merely changes the defaults (though I'm confused by use of the word 'normal' in the question. And, also, the point of the question...). – Photosynthesis

@DavidThomas display:none definitely takes the element out of the flow, whatever the flow is. – Hillery

@David Thomas, for example, div's position one after another when they are not manipulated, but when using float they overlap each other. – Sechrist

@David Thomas: Normal flow – Georgeannageorgeanne

Ah, true; I hadn't considered that one (I was stuck with display: inline (or block, inline-block...). My bad =/ Boltclock, yeah...I was more curious as to the OP's understanding of, and meaning by, the phrase; 'normal' is, after all, a commonly-used phrase, despite the technical specification of such by the W3C. – Photosynthesis

Everything other than block or inline. – Landon

@biziclop: Consider that display: none doesn't generate a box for an element at all, so there won't be anything to remove from normal flow in the first place. The other values for display do not alter the normal flow. – Georgeannageorgeanne

@Georgeannageorgeanne Except display: table-* – Hillery

oh yea, table also forces div's around – Sechrist

@DanDascalescu I find the answer given here to be complete rather than the ones from that post. – Sechrist

Answer 1

Only the following properties affects the normal flow of any given element:

• float: right|left
• position: absolute|fixed

Just for completeness:

• display: none removes the element from the flow (strictly speaking the element will not have a flow order)

• position: relative does not change the flow order of the element, but changes its position relative to the normal flow position.

• visibility: hidden will maintain the element on the flow but will not render it to the viewport.

Intromission

Answer 2

There is an ultimate property that literally removes an element from the stream:

display: contents;

https://developer.mozilla.org/en-US/docs/Web/CSS/display

It helps a lot when you need to wrap a tr in a div, inside tbody/thead - in case use draggable functionality or something

Pellegrino