What is the means of terms "Normal Flow" and "Out of Flow", in terms of HTML, CSS and Browser?
views:
28answers:
2
+3
A:
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
2010-07-20 19:02:21
you mean elements which are positioned with `relative`, `fixed` or `absolute`
metal-gear-solid
2010-07-20 19:03:52
@Justin Niessner: an honest innocuous question here: could you explain why relatively-positioned elements are out of flow if they're not floated?
BoltClock
2010-07-20 19:05:34
@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
2010-07-20 19:07:45
@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
metal-gear-solid
2010-07-20 19:08:46
@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".
Scott
2010-07-20 19:13:47
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.
Scott
2010-07-20 19:21:56
+1
A:
"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
Scott
2010-07-20 19:11:13