Can somebody explain to me what does "flow" from the CSS flow layout mean?

The only explanation about the term "Flow Layout" that i could find online was this one: 


Normal Flow, or Flow Layout, is the way that Block and Inline elements are displayed on a page before any changes are made to their layout. The flow is essentially a set of things that are all working together and know about each other in your layout.


So, i understand what is "layout". It just means the way the elements are positioned inside the page or the DOM. But i struggle to understand the meaning of the word "flow" in this context. 

"..a set of things that are all working together and know about each other in your layout". This makes very little sense to me. What "things"? Can somebody give me an example, and explain to me what is "flow" actually mean in simple English? 


I am sorry i still don't quite get it. The "flow" of WHAT starts in the center? Your examples were just about the way people read text, but in HTML, there are elements, and the way they are positioned is called "layout", so what is a "flow" layout then? The flow of the elements? Isn't that what layout means? Or are you talking about the way the browser reads the code? 

Update 2:

I've seen that page. I've seen all the pages on the surface and dark web. I still do not understand what is the meaning of "flow". What does it actually mean. That website doesn't give me any actual explanation. It talks about the way elements are positioned. That's "layout". But what's a "Flow" then? Can you please try to explain it to me? 

Update 3:

That website only mentions the word "flow" one time in the context of 'disrupting the flow" without defining what it actually means. 

Update 4:

Robert, if that's "flow", then what's "layout"? Every user either explains only the layout or only the flow, and the answer is always the same - the position of the elements. I already explained that i know that, what i don't understand is BOTH definitions IN THE SAME CONTEXT. 

Update 5:

@oyubir thanks for the long explanation, but damn i still struggle to understand clearly what it means. Your definition of "flow" seems exactly the same as just the word "layout". You talk about flow being a sequence, but sequence just means the order in which related things follow each other.. well isn't that exactly what "layout" means? What is the difference between the way things follow each other, and the way thing are positioned? And doesn't "flow" means some movement? Movement of what? 

3 Answers

  • oyubir
    Lv 6
    2 months ago
    Favorite Answer

    Layout is the way elements are positioned, indeed.

    But in HTML, layout are not positioning a fixed set of elements (as it could be for classical GUI design for example — well, they have flow also, but not as the standard, default way of thinking).

    It is positioning a flow of elements. 

    HTML is a text description language.

    It is a little bit like the difference between Word and Powerpoint.

    In Powerpoint you deal with slides. So even if there are some "flow oriented" layout (the way a text is positioned inside a box, for example), the main usage is to position each element at a given position of the slide.

    In Word, on the other hand, you want do deal with a potentialy infinite text. You can't have each paragraph positioned at a given position of a page. Because then, you would have to redo everything each time your insert text in existing document.

    So, when you specify layout in word, usually, you don't do it by specifying position of things, but how to render a flow of text.

    Same goes for HTML. It is not a GUI description language. It is a text description language.

    So your main job, in CSS, is to specify what to do with a flow of text.

    And yes, that is layout. But layout of a flow of elements.

    Things get more complicated when you want to specify more advanced layout dealing with several different flows.

    In Word, you can have, for example, two independent columns. So two flows. Each piece of text is either part of one flow, or of the other.

    Or you can have the page layout (where you specify header and footers) and the document itself. Two different flows.

    In HTML/CSS, it is also the same. Some action implies that some text are not part of the same flow of another.

    We have already discussed this, I remember, about a page of yours with "float:left" elements, and "position:absolute".

    Having an element in "float:left" remove the element from the main flow (so the layout in charge of the main flow won't care for it), and put it in another flow (with all other float:left elements).

    So flows are not the layout. But it is the thing layouts have to deal with. Because, unless they are fixed position layouts, what layouts have to do is to specify where a flow (a stream, a sequence, ...) of elements are rendered.

    Each one on the right of the previous, unless line is full, in which case it is at the beginning of a new line... for the normal flow.

    But if you said that the element is not part of the normal flow, then, it won't be positioned there.



    <span style="float:left">Three</span>



    <span style="float:left">Six</span>


    for example will place One, Two, Four, Five and Seven one after each other (default layout is to take each element of the default flow and place it one after the other).

    But Three and Six are not part of the default flow. They are in another flow. Which is rendered with its own layout. Quite similar one than the default layout, in the case of float:left: each element of that flow is placed next of the previous element of that flow, from left to right. So, same layout roughly, but different flow.

    So, at the end, what you see is

    Three Six One Two Four Five Seven

    (In fact it is

    ThreeSixOne Two Four Five Seven. Because layouts are not exactly the same. Layout for the default flow put spaces between words. Layout used for the float:left flow, doesn't)

    2 Flows of elements are both rendered according to their layout. And then combined.

    So just replace "flow" with "sequence" or "list". That is roughly it. A flow is a sequence of elements that is rendered independently from elements that are not in that sequence.

    What may be confusing, is that lot of things you can do in CSS impact both flow and layout.

    float:left, for example says two things:

    * That element is not in the same flow that others.

    * That flow is rendered from left to right.

    But in reality that is quite normal. Each flow needs a layout.

    In our previous discussion you seemed to understand those things. So I guess the problem is more a vocabulary problem.

    But a flow is not a layout. A flow is a sequence of elements (by default a page contain one big sequence of elements. Unless you specify that some elements are in an independent sequence, using things like float:left). And a flow HAS a layout.

    Is rendered according to a layout (a flow layout).

    Another way to put it, is that to know where an element should be positioned, either the browser use a non flow layout (position:absolute, for example. Element is removed from any flow, and placed directly on the page)

    Or you put the element in a flow (the default one, or another one, with float:... for example) and then a flow layout place each element of the flow one after each other

  • 2 months ago

    Imagine you have a set of cards and are laying them out on a table. Each card is an element in html, the table is the block element where they're going to be arranged, the flow is the order in which you are going to arrange them.

    For example, normal flow is starting from the top-left then place another card to the right, the next to the right and so on until you reach the edge of the table, to continue you place the next card one row down on the left side. This is what the browser will do unless you tell it otherwise.

    Other languages start from the right, like Hebrew and Arabic; and yet others are not horizontal, but vertical. The newer specifications have a way to change the flow, not just the writing mode. Many times you want to do that, in a bilingual site you may want to change not only the writing from right to left, but also how the menu items and sidebars are positioned, so they will start from right to left, a more natural order for people who use those languages.

    Taking something out of the flow with float, for example, means that you're telling the browser not to place that element where it should go next, but where you're specifying and also to not affect the flow of the rest of the document.

    It's a bit tricky to understand at first but with some practice you'll get it.

    Layout is the position of the elements in the page as a whole, which may follow the normal flow or not. Insde each element there's also a flow, that you can also specify.

  • 2 months ago

    I think this tutorial will help you - and you're on the right track; it's about how html components are presented on a web page and it is CSS that provides the tool to reposition what is presented.

Still have questions? Get your answers by asking now.