What Are the CSS Properties That Get Elements Out of the Normal Flow

What are the CSS properties that get elements out of the normal flow?

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.

Not-normal HTML Flows

Found the answer in the W3 Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification in Section 9: Visual formatting model.

This describes Normal Flow, Floats and Absolute Positioning. It also contains a Comparison of normal flow, floats, and absolute positioning.

Given that these are all discussed together, I think that the confision was that there are different types of flows, but only normal flow actually contains the word flow.

Therefore, the three types of flow positioning schemes as per CSS 2.2 are:

1. Normal Flow
2. Floats
3. Absolute Positioning

They are refered to using these terms.

NB: These are not referred to as flows, they are refered to a positioning schemes.

How to remove an element from the flow?

None?

I mean, other than removing it from the layout entirely with display: none, I'm pretty sure that's it.

Are you facing a particular situation in which position: absolute is not a viable solution?

Is there any other way, using CSS, to get an element to NOT influence the flow of the page, besides using the positions absolute or fixed?

You could float the element, but that usually causes the element and its in-flow siblings to move away from where it would otherwise be were it in the normal flow. It also transforms the element into a block box. If either of these effects are undesirable, then floating is not an option.

If you want the element to remain as it is but act as if it weren't in the normal flow, then simply specifying position: absolute alone should suffice. If you don't specify any of top, right, bottom or left, then the element won't be offset anywhere from its normal flow position, except in special circumstances (e.g. absposing an element will block margin collapse on that element, because when it's out of flow it no longer has any other margins to interact with — compare this example with this one).

Why doesn't the normal flow element accommodate the floati element?

When you float the element, it means it will float to the direction and overlap other elements. In this case, you haven't added additional CSS to make them accommodate, but a simple fix for your case will be adding display:inline-block to the #boxGreen this will make them accommodate. This will display the element by side by side

div{ 
  width:100px; 
  height:100px; 
  border:8px solid #333;
}
#boxBlue{  
  background-color:blue;
  float:left;      
}
#boxGreen {  
  background-color:green;
  display: inline-block;
}

<div id="boxBlue">
</div>
<div id="boxGreen">
</div>