49

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.

andreihondrari
  • 5,743
  • 5
  • 30
  • 59
  • 1
    `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. – biziclop Aug 11 '12 at 19:55
  • 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...). – David Thomas Aug 11 '12 at 19:56
  • 3
    @DavidThomas `display:none` definitely takes the element out of the flow, whatever the flow is. – biziclop Aug 11 '12 at 19:57
  • @David Thomas, for example, div's position one after another when they are not manipulated, but when using float they overlap each other. – andreihondrari Aug 11 '12 at 19:57
  • 2
    @David Thomas: [Normal flow](http://www.w3.org/TR/CSS21/visuren.html#normal-flow) – BoltClock Aug 11 '12 at 19:57
  • 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. – David Thomas Aug 11 '12 at 19:58
  • [Everything other than block or inline](http://www.w3.org/TR/CSS2/visuren.html#normal-flow). – steveax Aug 11 '12 at 19:59
  • @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. – BoltClock Aug 11 '12 at 20:01
  • 1
    @BoltClock Except display: table-* – biziclop Aug 11 '12 at 20:02
  • oh yea, table also forces div's around – andreihondrari Aug 11 '12 at 20:05
  • 1
    @DanDascalescu I find the answer given here to be complete rather than the ones from that post. – andreihondrari Jul 20 '15 at 08:17

1 Answers1

66

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.

Marcelo De Zen
  • 9,439
  • 3
  • 37
  • 50