Flow

The term flow is used to describe the strategy used by browsers to layout successive HTML elements as they are encountered while an HTML document is being displayed. Flow is intimately linked with position. Unless the CSS rule(s) used by the element specify position:absolute or position:fixed layout follows a strategy known as normal flow. Normal flow works like this:

Block boxes are stacked one after the other. The vertical margins of adjacent boxes are collapsed. This means that instead of using the bottom margin of the upper box and the top margin of the lower box, only the greater of the two is used. Each block occupies the whole of the clientwidth of its parent. The heights of the blocks are adjusted to fully display their contents.
Inline boxes are stacked one next to the other from left to right. The horizontal margins are never collapsed. If there is insufficient space to stack an inline box it flows into the next line.

inlineinlineinlineinline inlineinlineinlineinline

<html>
   <head>
      <style>
         .blockone{
            background-color:yellow;
            border-style:dashed;
            margin-top:0.5em;
            margin-bottom:0.5em;}
         .blocktwo{
            background-color:blue;
            border:dotted;
            margin-top:2em;}      
         .blockone b,.blocktwo em{
            color:red;
            padding-right:2em;}
         .blockone em,.blocktwo b{
            color:gray;
            padding-left:0.5em;}
      </style>
   </head>
   <body>
      <div class="blockone">
         <b>inline</b><em>inline</em> <b>inline</b><em>inline</em> <b>inline</b><em>inline</em>...
      </div>
      <div class="blocktwo">
         <b>inline</b><em>inline</em> <b>inline</b><em>inline</em> <b>inline</b><em>inline</em>...
      </div>
   </body>
<html>

Top margin is 0.5em - taken from .blockone
Bottom margin is 2em - taken from .blocktwo.margin-top
2 + 0.5em padding between inline and inline
No padding between inline and inline
Blocks occupy the clientwidth of their parent
Inline boxes flow into a new line when required

▼Jump To...

◄ ►