9

What is the meaning of the terms "Normal Flow" and "Out of Flow", in terms of HTML, CSS and Browser?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852

3 Answers3

5

Out of Flow is any element that has been positioned relatively or absolutely or anything that has been floated.

The rest would be considered Normal Flow.

Look at CSS Positioning and Layout and pay close attention to the "Methods of Positioning Elements" section.

Justin Niessner
  • 242,243
  • 40
  • 408
  • 536
  • 1
    you mean elements which are positioned with `relative`, `fixed` or `absolute` – Jitendra Vyas Jul 20 '10 at 19:03
  • 2
    @Justin Niessner: an honest innocuous question here: could you explain why relatively-positioned elements are out of flow if they're not floated? – BoltClock Jul 20 '10 at 19:05
  • 1
    @BoltClock - Because even if you're specifying a relative position, you're still overriding the position the element would have in the normal flow of the document. The alternative would be to try and use margins/padding to maintain the normal flow. – Justin Niessner Jul 20 '10 at 19:07
  • @Justin Niessner - if i'm giving `position:relative` to parent element and `position:absolute` in elements inside parent. then child element will only out of flow inside parent only not from whole page – Jitendra Vyas Jul 20 '10 at 19:08
  • 1
    @BoltClock and Metal-gear-solid - technically I don't believe `relative` is considered out of flow as the space that it would normally take up still remains defined in the flow, even though the element itself can be shifted in relation to that "space". – ScottS Jul 20 '10 at 19:13
  • 1
    I'm going to take back my last comment. Based off the link I gave in my answer, it does appear that `relative` is considered a form of out of flow since the element itself does not flow normally, even though the elements surrounding it do. – ScottS Jul 20 '10 at 19:21
  • @Jitendra Vyas I would also recommend to check for the CSS Tutorial for Beginners video series found in YT where you can find a consist explanation about how flow works (#30-#33 videos) – ira Apr 22 '16 at 08:50
  • @ira can you post link of the video? – Jitendra Vyas Apr 23 '16 at 11:05
  • @Jitendra Vyas you may find the first video I am talking about [here](https://youtu.be/IaOggxOFjTk) but I would recommend to check the whole series in case you are not so familiar with CSS – ira Apr 23 '16 at 16:17
  • "anything that has been floated" ¿ do you mean when we use `float: left | right` on an element? @Justin Niessner, thanks in advace –  Oct 20 '22 at 16:48
2

"Normal Flow" is the typical way the browser renders, with consideration of the elements around it and other elements considerations for it. "Out of Flow" means the element is "ignored" or the behavior "changed" by elements around it. Edited this next sentence: Thus, if an element is anything other than static (the default) it may be out of flow (I say may, because for relative to be out of flow, it must be shifted) or if the element has a float then it becomes "out of flow" because it does not follow either a normal inline standard of one element after another in a line or a normal block standard of elements stacking on each other down the page. This page is (of course) more thorough in understanding this: http://www.w3.org/TR/CSS2/visuren.html

ScottS
  • 71,703
  • 13
  • 126
  • 146
1

The static and relative elements still in the Normal Flow, but the absolute and fixed elements are removed out of the flow.

from http://www.w3.org/TR/CSS21/visuren.html#choose-position

static: The box is a normal box, laid out according to the normal flow. The 'top', 'right', 'bottom', and 'left' properties do not apply.
relative: The box's position is calculated according to the normal flow (this is called the position in normal flow).

......

also you can read more about css positioning here: The position declaration

mciiv
  • 11
  • 1