In the CSS Visual Formatting Model, What Does "The Flow of an Element" Mean

In the CSS Visual Formatting Model, what does the flow of an element mean?

An element is called out of flow if it is floated, absolutely positioned, or is the root element.

If an element is floated, position:absolute, position:fixed or the <html> element, it is out of flow.

An element is called in-flow if it is not out-of-flow.

Self-explanatory.

The flow of an element A is the set consisting of A and all in-flow elements whose nearest out-of-flow ancestor is A.

This is ridiculously confusing. And there seems to be nothing online providing a good explanation. In fact, even the CSS Working Group refers to this phrase as "nonsensical".

What is meant by participate in the definition of “normal flow” in the CSS 2.1 spec?

When a box is said to participate in some formatting context, it just means that element is laid out according to the rules of that formatting context. If an element participates in a block formatting context, it's block-level and it's governed by block layout. If an element participates in an inline formatting context, it's inline-level and it's governed by inline layout. And so on.

"Block container box" and "block formatting context" are two different and only very loosely related concepts. You seem to be conflating them, which is unwise.

A block container box establishes a block formatting context only under certain conditions. The criteria for this to happen are listed in the spec, but basically the only time a block container box doesn't establish a BFC is when it has display: block; overflow: visible; float: none; position: static/relative (from here).

As stated in the spec, every block-level box participates in some block formatting context. It doesn't matter whether its parent block container establishes a BFC. If its parent doesn't establish a BFC, then the parent's parent, or the parent's parent's parent, or some other ancestor higher up in the tree — all the way up to the root element — does. This means that a single block formatting context can — and almost always does — encompass many nesting levels of elements. This is collectively referred to as the normal flow.

Even if you had an entire layout of block boxes, if none of them establishes a BFC, then all of them participate in the same BFC that's established by the root element (and the root element is guaranteed to establish one). In the following example, all three elements participate in the root element's BFC, and so they are governed by block layout, even though none of them establishes its own BFC:

<body>
  <div>
    <p>
  </div>
</body>

The effects of overflow: hidden on block formatting contexts in the presence of floats are discussed elsewhere, but in short, floats never intrude into other block formatting contexts, which is why making the p establish its own BFC causes it to become narrower due to the float. Making the div establish its own BFC doesn't change anything because, once again, the p is still participating in some BFC regardless — you're just changing whose BFC it's participating in.

What exactly is a formatting context?

A formatting context is not really an area. It's more a state of a box that defines the set of layout rules that apply to itself and its participant boxes.

What is the difference between phrasing content and flow content?

The easiest way to remember, is that if it can be inside a sentence, it's phrasing content.

Text can be inside a sentence, so it's phrasing.

An emphasised bit can be inside a sentence, so it's phrasing.

An image can be Sample Image inside a sentence, so it's phrasing.

A sub-heading or an article cannot be inside a sentence, so they are not phrasing.

A link can be inside a sentence, so it's phrasing. But as of HTML 5, one is also allowed to have a link containing whole blocks of text, in which case it is not phrasing.

Phrasing content falls into three categories:

Content that is replaced by something visually. (E.g. as <img> is replaced by an image.
Content that contains text within a run.
Content that provides metadata about a specific piece of text within a run. (E.g. <link> when used with itemprop rather than <link> in the <head> which defines a relationship between a document as a whole and the resource linked to).

Flow content includes phrasing content, but also elements like <p> and <h1> which define a whole run of text, <article> which contains one or more runs and <table> which contains rows of cells which contain runs of text.

It is very critical in advanced CSS to know the different kinds of content and not just the definition of it , or just the list of elements that come under a certain type of content , but also "Why" a certain element comes under a certain category and whats the major difference between similar content categories , in the case of my question , whats the difference between "Phasing content" and "Flow content".

I don't entirely agree.

It's absolutely vital to basic HTML to know this. It's the very first thing that should be taught in HTML after writing <html><head><title>Hello</title></head><body><p>Hello World!</p></body></html> in a text editor and opening it in a browser, and "there are several different elements in HTML". It may not become fully clear until one has then learnt the elements that are examples of each, but getting one's head around it is important as a lot of things just don't make sense otherwise and it makes the difference between a simple markup language with easy-to-remember elements and attributes and a messy soup of tags where you can never remember why validators are saying you're doing it wrong.

Now certainly, your CSS is going to generally follow from your semantics, and the defaults follow from them too (most visible phrasing content is either a replaced element or display: inline;, most other flow content is either display: block; or something that relates quite obviously to the semantics (e.g. tr: {display: table-row;}).

But because the HTML is where you think first about the semantics, when writing the CSS you can focus more on just the rendering, and to a degree free yourself from that concern. Certainly, correct semantics should not generally become a restriction upon the CSS beyond the simple fact that you obviously want a visual design that helps your message get across.

So for example, just because <p> is defined as "a paragraph" and in our culture paragraphs are today generally typeset as blocks of text with either a vertical margin between them or an indent on the first line, does not mean we have to follow that rule. We can layout our paragraphs in late-mediæval style like here with paragraphs running together separated by pilcrows.

Not that you are likely to want to do so, but you certainly can. So while good CSS does build on the semantics of the elements, it also frees us from them in that we don't have to have incorrect semantics in order to have something look (or sound) like we want.

Can someone explain one part of the float behaviors?

What's the meaning of the first paragraph?

It's really just a precise definition of when a line of text is considered as being "next" to a float, basically when there is vertical overlap between them. When a line of text is considered to be next to a float, the line of text is shortened to avoid the float.

What is the outer height? Is it margin?

Yes, it's the distance from the upper edge of the top margin to the lower edge of the bottom margin. The important thing to remember in this context is that margins can be negative. So the lower edge of the bottom margin can be above the upper edge of the top margin, in which case the height is negative.

See below or http://jsfiddle.net/n0fobpqr/2/ for examples of how adjusting the bottom margin (and hence the outer height) affects the width of the lines of text.

body { font-size:20px; width: 300px; }figure { float:left; }img { padding-right: 10px; }.one figure { margin:0; }.two figure { margin:0 0 -60px 0; }.three figure { margin:0 0 -110px 0; }

<div class="case one">    <figure>        <img src="http://placehold.it/100"/>    </figure>    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p></div><hr/><div class="case two">    <figure>        <img src="http://placehold.it/100"/>    </figure>    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p></div><hr/><div class="case three">    <figure>        <img src="http://placehold.it/100"/>    </figure>    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p></div>

What are `scrolling boxes`?

As @alex said a scrolling box is a box where the value of overflow is set to a value different from visible (the default one). I cannot confirm but I concluded this based on this previous answer where overflow is creating some issues with sticky element.

As I explained there, if you have an element with overflow:hidden as an ancestor of the position:sticky this one will stop working because its offset will be calculated based on that box (with overflow:hidden) because it's the nearest ancestor with a scrolling box. Since we used hidden we cannot scroll this box so we cannot see the sticky behavior.

Here is a basic example:

.wrapper {  height:200vh;  border:2px solid;}.wrapper >div {  position:sticky;  top:0;  height:20px;  background:red;}

<div class="wrapper">  <div></div></div>

In the CSS Visual Formatting Model, What Does "The Flow of an Element" Mean